A one-trick site, but what a delightful trick! Pablo is a flamingo who loves to dance, and he’s brought to life beautifully in fully responsive WebGL. Just don't try to mute the sound...
Pablo is the result of a collaboration between authors Nathan Gordon, Pascal van der Haar and Jono Yuen. It isn’t a promotional site, but a side-project that came about through a conversation between web developer Gordon and art director Van der Haar.
How it was made
Pablo began life as a model constructed in Maya. This was then exported as a simple grid mesh, to which the illustrations by designer Yuen were added as a texture. The models were then brought into the browser, where 3D modelling library three.js and physics library Matter.js were used to bring Pablo to life online.
"I was able to create a precise form that could be directly mapped to the physics base. This gave me the result that I was after, and was the largest 'aha!' moment of the whole project," says Gordon.
The response from the public has been incredible - in his first week online Pablo was seen 60,000 times, won FWA Site of the Day and earned countless plaudits across social media.
Words: Peter Gasston
Peter Gasston is a veteran web developer who now works as a technologist and frontend lead at rehabstudio. He’s the author of The Book of CSS3 and The Modern Web.
Like this? Read these!
- 3 top tools to create a responsive website
- Brilliant Wordpress tutorial selection
- Download free textures: high resolution and ready to use now
