• Need Hosting? We highly recommend Bluehost
  • Built by: Bryan James
  • Template? No, this is a custom built website
  • Reviewed: March 27, 2015 by Rob Hope
Feedback For Coffee
Feedback For Coffee ☕ - send $5 and get a 5 minute Audio Critique of your One Pager or Landing Page.

In Pieces

‘In Pieces’ is a phenomenal CSS-based interactive experiment bringing awareness to 30 endangered species. It’s difficult to put into words what Amsterdam-based interactive designer, Bryan James, has achieved in this incredible One Pager – make sure you read his build notes in this review. Easy contender for One Pager of the year. If you missed it, here are last years Top 20 One Page Websites.

Born out of tinkering with a simple property, this project is unabashedly part-digital experiment. The core technology used here is just good old CSS — no Canvas or WEBGL witchcraft.

Since hearing about CSS polygons, I've been a little surprised at the lack of furore around the technology, so I wanted to create something which not only worked as a project in itself, but also pushed this underused line of code as far as possible.

The shard-shifting capabilities work in webkit-browsers only, which of course is a limitation but at the same time, it works on mobile which are almost completely webkit-based. Firefox does support the clip-path property, but as an SVG referenced shape and thus, the coding for movement works in an entirely different manner. I wanted to focus purely on the CSS route.

So, in essence — each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.

Here is an in-depth making of 'In Pieces' on Smashing Magazine.
Screenshot Concierge

Impressed by this Retina-Optimized Screenshot?

Screenshot Concierge delivers beautiful screenshots of your Landing Page in multiple resolutions and devices - perfect for a website launch.

Rob Hope

This original One Page website was reviewed by Rob Hope

I started One Page Love back in 2008 and want to keep adding more value. Please tweet or email me with suggestions or any questions.