Ray-Ban

Worked as Lead front-end developer while at Stinkdigital

Ray-Ban’s #Campaign4Change Tumblr is an interactive micro-site that lets users tear through a series of images and messaging until they find a phrase that represents their campaign for change.

The bottom or the top image can be torn away to reveal a new message:

Users can continue to tear until they find a message they agree with:

When the user finds one they like, they can share it on download the file to their computer:

The tech side

The experience is created using 3 <canvas> elements:

1. Shows the current layer being torn away
2. Shows the cumulative image generated so far
3. Used to merge the layers and export the image for sharing

When the user decides to share an image, the canvas is rasterised and a new window is opened. The new window submits a form that contains the image, and the form is triggered to send the image to the server.

Once the server has parsed the image as the correct format, it redirects the user to appropriate URL for sharing, with the image and site url populated already.

If the user has chosen to download the image instead of share, the form is submitted from the current window and the download happens on the page/tab the user is currently on.