Hatom: Five-Phase Griffin Mythology Rendered in WebGL

Hatom is a DeFi liquidity protocol on MultiversX, but you wouldn't know that from the first thirty seconds on hatom.com. What you get instead is a glowing egg floating in the void, pulsing with the quiet confidence of something about to happen. Scroll, and it happens: the egg cracks, light floods through the fractures, shell fragments scatter and dissolve into a surrounding cosmos, and a griffin emerges. The whole experience unfolds across five chapters, each one a metaphor for a piece of Hatom's ecosystem. Conception, birth, armor, interconnected planets, cross-chain scalability.The sound design, by Ben Lukas Boysen, is immersive. Put headphones on.

The build comes from Immersive Garden, the Paris studio that has quietly become one of the most decorated WebGL teams on the planet. Their stack here is Three.js for the rendering, Vue/Nuxt on the frontend, GSAP and Lenis managing the scroll choreography. What's worth studying is how they handle asset loading across five distinct 3D scenes without the user ever feeling the seams. A custom progressive preloader feeds assets in behind the curtain while a long-press interaction (tuned differently for mobile and desktop) keeps the user's hands busy. The transitions between phases scored a 9.4/10 for animations on Awwwards. The site picked up Awwwards Site of the Day in November 2024, a Developer Award, Product Honors, and a Bronze at Le Club des DA.

If you want to learn something, don't just watch it. Open devtools and watch the draw calls during the Booster phase, where the griffin dons token-powered armor while a city grows in the background. That's where the performance story gets interesting. Then check out the Awwwards case study for the production breakdown. These are people who treat scroll position like a film reel.