Ray Lamontagne – Ouroborous

UX Lead | Interaction Development | Video

PHASE I – Interact

The anticipation begins. A short loop teases Ray’s single ‘Hey, No Pressure’. Built using HTML5’s canvas, visitors can directly control and interact with the album artwork, subscribe for updates and pre-order.

ouro-phase-1

PHASE II – Pseudo Video

With over 10,000 page hits in the first week, Phase II launches — a pseudo video featuring the full length version of the track with visuals from the HTML5 player in high definition.
ouro-phase-2

PHASE III – Tracklist

Phase III features an interactive vinyl flipper, album credits and, most exciting for press and media, a complete tracklisting.
ouro-phase-3

PHASE IV – Preorder

In the final phase of the campaign, visitor can finally pre-order the album and special editions.
ouro-phase-4

PSEUDO VIDEOS (881,000+ Combined Views)


The perfect bookend to the project, the same interactive animation was used as a generative output of the full pseudo music videos for Lamontagne’s singles ‘Hey, No Pressure’ and ‘In My Own Way’.

TECHNOLOGIES USED

HTML5 Canvas w/ Reactionary Javascript
jQuery
CSS3