Responses by Leigh Whipday, creative director, ToyFight.
Background: Finding Ctrl imagines a radical new vision for the future of the Internet—so to house this vision, we created an immersive, interactive and thought-provoking experience. The site features a mixed-media compendium of provocative visions of what the future Internet could look like, including essays by leading thinkers in the Internet space and artistic contributions by short story writers, artists and illustrators.
Core design: From a design standopint, we didn’t want to go with a typically futuristic visual aesthetic. As the site explores the history of the Internet as well as its future, we liked the idea of a retro future design. There’s something really interesting about the way old movies imagined how technology would look.
Favorite details: We pushed really hard on the little details as we always try to do. Despite time constraints and complexities of content, we knew we wanted to create a site that had lots of incidental animations and interactions: everything from the pixelated image transitions to the smiley feedback component to the wavy, draggable timeline.
Challenges: One of the biggest challenges was the sheer amount of content we had to work with. There were around 25 stories in different formats and styles that we had to integrate into the site. We knew we wouldn’t be able to create bespoke designs for each piece due to time and budget limitations, so we created a handful of interactive components and modules to cover all the media formats. We did make a few bespoke designs when we wanted to do something we thought would help tell particular stories.
Technology: We used GatsbyJS to generate the site. With a help of a couple of plugins, this enabled us to use React and SCSS for our structure and style and Markdown templates to manage the content.
Anything else? The particles are created using three.js with a help of a utility that returns random coordinates on a 3-D model—although those calculations are all done and stored prebuild. The pixelated image effect is created using Canvas, and we used TweenMax for some extra polish on the timeline and image transitions.