Responses by Josh Hubberman and John Robson, partners, CTHDRL.
Background: In support of the ad agency Giant Spoon and the announcement of video game Call of Duty: Warzone’s Season Three, we conceptualized and built an in-game decoding chase that drove passionate Call of Duty players to our site, where they could unlock secret payoffs and “leaks.” This buzz and anticipation drove tons of social dialogue leading up to a final major reveal of the new game map, Verdansk. Fans had to decode messages by finding red phones and messages within the game and then collaboratively learn how to decrypt them to discover passwords that could be inputted on the site.
Design core: To support the build, we created a narrative around a fictional hacker collective called Zasha and built a futuristic hacker terminal experience—all made out of interactive ASCII components. Leveraging this design direction, we were able to translate the storyline into a compelling visual language for the core site as well as individual 3-D ASCII games that fans could unlock.
Each of the individual ASCII games was compelling by itself, but the final countdown featured an ASCII chat where all gamers congregated during a timer. At the end of the countdown, a trailer for Warzone Season Three showed, and when it ended, the entire site transitioned into the new map.
Navigation structure: The site is entirely built around a text input in which pop-up modals house individual assets and experiences. This enabled us to use passwords as a central navigational tool to explore, discover Easter eggs and validate decryptions.
Technology: The site was built on Nuxt.js, using Firebase as a database, authentication provider and CMS. Most of the 3-D work on the site was done using three.js with custom renderers that could output in ASCII text to match the design system. We leaned on Popmotion as our primary animation library, which we used to build most of the glitch and loading effects. There is a moment where the user can record themselves, have their recording rendered in ASCII text and then download a shareable video of it. We used the captureStream API to record the user’s video and then created Cloud functions in Firebase to convert the recording into a shareable MP4 with FFmpeg. Finally, there is another moment when the user can allow the site to capture their location and have it rendered to a 3-D globe in real time. For this, we used MaxMind’s GeoIP service to find the user’s location by IP address, and then we built a custom WebGL experience and shader to render the location onto a 3-D ASCII globe.