News

Site of the week: Over The Hills

Music meets multimedia web design to form a surrealistic interactive showcase full of wonderfully weird illustration

Use-jQuery-to-create-SVG-line-animations

Use jQuery to create SVG line animations

URL: overthetinyhills.com | DESIGNER: www.ultranoir.com / www.mcbess.com 

Attempts to explain Over the Hills to anyone who hasn’t experienced it first-hand won’t be easy. Nonetheless, this interactive audio visualiser designed around a seriously trippy gramophone is packed with surprises.

Based largely around the work of illustrator Matthieu Bessudo, aka McBess, and the music of his band the Dead Pirates, visitors are invited to spin some virtual vinyl. A looping excerpt featuring a riff from the Over the Hills EP soundtracks a curiously entertaining journey that exemplifies cutting-edge development.

Parisian agency ultranoir manages to inject a healthy dose of its own identity with a blend of HTML5, JavaScript and 3D rendering. “For the website interaction was imperative, although we also had to find a good balance between the McBess universe and that of ultranoir”, explains art director Guillaume Nicollet, “The website is heavily based upon WebAudio and WebGL.”

Such technology combines gleefully to create not only a rich environment but also what emerges as an improvisational rhythm game, augmented by waves of madcap visuals. “We used three.js to facilitate using 3D”, adds Creative Developer Nathan Gordon, “For some animation sequences, we also used GSAP (Greensock), which has a powerful API and is highly focused on optimisations. For the general code structure we used RequireJS, which permits an AMD (Asynchronous Module Definition) framework, allowing us to work in a more modular way.”

oth02

A link to the Dead Pirates EP allows you to preview tracks via an embedded player

oth01

Step inside the speaker cone of the player and you’ll tumble through an assortment of objects

×