.gif)
Turning Climate Science Into Interactive Storytelling
Quanta Magazine came to us with a bold vision: transform climate science research into something captivating and interactive, moving beyond static, print-like layouts and instead create a fully digital, responsive experience. At the core of their concept was the idea of nine interactive, morphing 3D planets—each tied to a story and designed to engage readers through seamless animation and scientific accuracy.
Services
- Design
- Development (Webflow)
- Animation
- 3D
To create an immersive, scroll-driven journey where planets transition seamlessly between articles across desktop and mobile, each 3D asset was carefully optimised to balance visual impact with lightweight performance, preserving the wow factor without compromising accessibility.
HLabs tackled the project through a tight collaboration of design, development, and project management, blending creativity with technical precision.
Design & Experience
- Translated Quanta’s vision of a horizontal, magazine-style narrative into a responsive web format.
- Collaborated with Quanta’s 3D artist to optimize models, ensuring scientific accuracy in details like gravity-driven cloud movement.
- Developed Figma prototypes for both desktop and mobile, testing breakpoints to guarantee consistent visual impact.
- Produced additional creative assets, including stills for editorial use and video reels for promotional activations.
Technology & Development
- Webflow formed the site’s backbone, while Three.js powered the interactive planets.
- Leveraged Lenis for smooth scrolling and GSAP for storytelling animations.
- Implemented custom GLSL shaders to simulate atmospheric effects.
- Applied compression strategies with Draco + KTX2 for fast-loading, mobile-friendly 3D assets.
- Debugged and optimized performance using Lil-gui and stats.js, ensuring consistent rendering across devices.
- Developed seamless scroll-triggered transitions, where each planet morphed elegantly as the story progressed.
Collaboration & Process
This was a true cross-disciplinary effort: designers, developers, and project managers worked in lockstep. The Webflow developer and Three.js animator iterated closely, troubleshooting bugs that emerged at the intersection of their work. The project manager bridged communication between the client and team, aligning expectations and ensuring deadlines were met despite technical hurdles.
"No website idea can be crazy enough, we can always look for a solution to make ideas come to life." - Dru, Illustration Director
The result was “Nine Worlds”, a one-of-a-kind interactive website that turned dense climate science into an engaging visual journey. Nine scroll-driven, 3D animated planets became the heartbeat of the storytelling experience—optimized for both desktop and mobile without compromising scientific accuracy or performance.
The site not only met but exceeded expectations:
- Smooth performance across devices despite heavy 3D assets.
- Immersive storytelling that kept audiences engaged from start to finish.
- Scalable technical learnings—this being HLabs’ first major Three.js project, it expanded the team’s toolkit for future immersive experiences.
The project reinforced HLabs’ strength in blending creativity and technical innovation. It showcased the studio’s hallmark strength: taking on ambitious, complex ideas and—through collaboration, persistence, and problem-solving—making them work beautifully.
