Responses by Romano Casellini, technical director, Rocani Studio; and Malte Gruhl, creative director, Studio Gruhl.
Background: outreach.space is a story-based web experience inspired by the passage of ‘Oumuamua, the first interstellar object ever observed by humankind, through our solar system. The website shows how exciting science can be and inspires people to stay curious and embrace the unknown. By engaging the user directly, we encourage visitors to explore different hypotheses and theories, sparking interest in astrophysics and scientific discovery.
Design core: We created a custom logo, developed fully interactive 3-D elements for WebGL and commissioned an original soundtrack by composer Raphael Campos, which we all wrapped up in a unique design direction that took us weeks to perfect. All of these elements were created to enhance the storytelling and develop an atmosphere of wonder and mystery, providing the right stage for the story written by Jana Janika Bach to unfold.
Favorite details: The small design elements that appear as the user scrolls. In the distant past, it was easy to create something like this using Flash. It has been challenging to achieve something similar for years now, but despite the challenges for the development team, it is once again possible for us to create details like this. That we are again at a point where we can create a site with so much depth across different viewports is amazing, and it makes us proud that we found a way to bring this back to the modern internet.
Challenges: Since this was a collaboration between our studios, we saw this project as a testing ground to learn about work pipelines, technology and processes. It was a bit like creating a concept car: Many of the things we integrated are very advanced and not ready for a wider consumer market. Some elements proved to be absolutely valuable and pushed both our studios to exciting new heights.
New lessons: There were a lot of valuable lessons for us here, such as the WebGL part. We created two sets of 3-D objects: one that can be used with client-based rendering, and the other for smaller devices using prerendered elements. This ensured that the experience worked across all devices without compromising the visual storytelling. It was a significant learning experience for us, but it holds great value for future projects.
Navigation structure: Simplicity. Just scrolling. No complexity. The site should truly feel like the story is unwrapping in front of you. We didn’t want to hide anything behind complex menus; the story itself is already so driven by information. So, we decided to remove all the complexity and simply allow the story to unfold.
Technology: We build our experiences with Next.js and JavaScript, use CSS for transitions and animations, and use three.js for 3-D with custom code for shaders.
At the core of this experience is a bespoke engine with many individual moving parts to create a unique cinematic feel. All motion is directly connected to the scroll, creating a sense of exploration, much like the astrophysicists in the discovery of ‘Oumuamua.