Skip to main content

Clever site showcases McDonald's memories

This year marks McDonald's' 40th anniversary, and it's celebrating by presenting customers' memories spanning five decades, in an interactive application created by Razorfish (opens in new tab), one of our favourite design agencies to follow on Twitter (opens in new tab).

Build your own site with these brilliant WordPress tutorials (opens in new tab)

Built entirely using the HTML5 Canvas API, there are two things here that really catch the eye: the beautifully animated interface, and good-enough-to-eat typography.

How they made it

The grid layout and posters were built using Pixi.js, a 2D WebGL renderer by Goodboy Digital (opens in new tab). A custom 3D renderer was built on top to provide the transitional animations and make them perform smoothly, even on mobile devices. The system that creates the typographic posters uses natural language and syntax analysis to deconstruct each sentence and tag words based on the sentiment it contains.

Goodboy's technical partner Mat Groves says: "We ran the sentiment information through an algorithm that would lay out the poster and render it using some custom-made WebGL shaders. The cool thing is this all happened in real time!"

Users can also share memories through speech input in browsers that support the Web Speech API – another great enhancement in a site full of beautifully considered details. The site is no longer live, but you can view it on Razorfish's portfolio site at 40together.razorfishawards.com. (opens in new tab)

Words: Peter Gasston (opens in new tab)

Peter Gasston is a veteran web developer who now works as a technologist and frontend lead at rehabstudio. He's the author of The Book of CSS3 and The Modern Web.

Like this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.