How They Did It: Ellie Goulding's HTML5 Lights

Why read about a pop singer's music video? Because it's a major commercial project created in HTML5; it's optionally interactive, but cool left alone too; and it really caught the web's eye.

The HTML5 edition of Ellie Goulding's 'Lights' was released a month ago, but is still generating Twitter buzz. The video begins a bit simply, but quickly grows more and more complex; and even during the spectacular finale, performance (on my machine, anyway) is pretty impressive.

So don't just immerse yourself in the Lights; go behind the scenes and see how it's done.

Two looks-behind-the-curtain are now available online.

The developer is HelloEnjoy, which created the amazing HelloRacer, a popular demonstration of WebGL's capabilities. HelloEnjoy's creative director is Carlos Ulloa; Ulloa gave a talk on Lights:

and also wrote a detailed explanatory article for .net magazine. By way of introduction, Carlos explains:

The client gave us free creative rein and was very understanding with the experimental nature of the technology, which allowed us to play with different visualisation techniques. In the same way live music visuals make for a heightened experience, we wanted to achieve this feeling of perceiving music in an enhanced way through light and colour, plus interactivity.

So the recipe sounds ideal: experienced developers given free creative rein by an important client for a major project (12,000+ lines!) using emerging web technologies.

To give you an idea of the diversity of this project's composition, here are the tools and technologies HelloEnjoy integrated:

• WebGL using 3D engine three.js
• WebStorm (JavaScript IDE)
• PhotoShop
• StreamServer (for integrating real-time tweets into the video)
• TimelineFX (particle effects editor)

But Carlos' coolest insights are in the details of implementation -- when the team chose pre-rendered sprites (for performance), for example, and what they decided to render in real-time; how a combination of PhotoShop filters and JavaScript produced perfectly-pitched hills for fun flyover; and so on.

Watch Carlos' talk above, or read the (extensively hyperlinked) article, to watch some HTML5 masters at their best.