News

Site of the week: Soleil Noir Dream On

Call it a microsite or ‘wishcard’ but this tech demo for Soleil Noir is a joyous celebration of progressive design

5

If visions of the future could actually be trusted, we would probably be flying around on jetpacks by now. We might not be there yet but one thing is for sure, the internet has evolved in ways few dared to imagine.

This is what Dream On is all about, celebrating modern web development today and what form it it could take tomorrow. French agency Soleil Noir calls it a 2014 ‘wishcard’, a mixture of ‘indie videogame and humanistic manifesto’ for road-testing progressive techniques: “This project was a perfect occasion for testing new design processes, where code plays a huge role in the final aesthetic,” says designer Thomas Buffet. “Every image was designed within 3D software before being entirely re-created and animated in code using Three.js. The soundtrack is the icing on the cake.”

Combining powerful web technologies including CSS3 and HTML5’s canvas, most crucially it was a JavaScript API at the heart of this incredibly rich graphical experience. “We chose WebGL because it was the perfect way to provide best performance and slickness in our application,” explains technical director Panagiotis Thomoglou. “It also allowed us to achieve an illusion from placing 2D elements within a 3D space using custom shaders. We then rethought scrolling as interactivity and we came up with the idea to not really scroll but to float in the y-axis of the space.” Who really needs jetpacks anyway?

solielnoir60802

• A breadcrumb trail navigation down the right side enables users to jump through each section

solielnoir60803

• The second slide is a festival of flying shards, culminating in an array of colours as they collide

×