Responses by Christoffer Klungerbo, 3-D designer; Christopher Køltzow, creative director and digital designer; Marius Nohr, developer; and Linda Tiller, producer, TRY Apt.

Background: The goal of this site is to provide visual information about the health effects of cannabis on young people. As part of a larger social media campaign, the site features banners and videos that explain the effects in a casual, fun way. We hoped to offer a visually appealing way to inspire young people to take a second look at information that they feel they already know.

Core features: The 3-D elements. We emphasized the smooth visual animations and responsiveness while scrolling to keep our target audience’s attention. The blue, clinical client profile is used to not only give the site and elements a distinct style but also to convey the neutral stance of the clients on the subject.

Favorite details: How the scrolling 3-D animations turned out. We got some really nice parallax and immersion from some of the scenes.

Challenges: We faced a lot of struggles in making the site work responsively. Combined with the 3-D scenes and text, the scrolling turned out to be quite complicated to pull off, as the 3-D elements ran independently of the text. The text also had to withstand being translated into different languages in real time and still maintain the overall layout.

New lessons: With sites like this, all you want to do is go bananas with 3-D, animation and interactions. But responsiveness in WebGL is a lot more finicky and tough to do than we initially anticipated.

Navigation structure: Navigation is kept simple. Our main purpose was to create a linear story, so scrolling is the main means of navigation. We also have a chapter menu on the right to help show visitors where they currently are and enable them to jump around if they would like.

Technology: The site is purely a front end. We used three.js for the rendering of 3-D assets. Animation of the text and 3-D assets were done using GSAP. All systems—scrolling, shaders, translations and tracking—were built from scratch using good old HTML and JavaScript with Webpack.