Immersive website with interactive storytelling and 3D customizer

Noomo ValenTime immerses you in a magical 3D world to tell a reimagined story of St. Valentine — ending with a chance to create your own custom heart and share it with someone you love.

It all starts with interactive storytelling

People often think of a story as something written, like in a book. But for websites and digital experiences, a story is what you see, feel, and interact with.

And today, we want to share another example of how a digital story can unfold — the Noomo ValenTime website.

Noomo ValenTime is an immersive 3D experience where users explore a reimagined tale of St. Valentine and create a personalized digital heart to gift someone special.
And yes, it’s almost May and here we are, launching a Valentine-themed website.
Why? Because you don’t need to wait for a special day or occasion to tell someone you love them.
That’s why we call it ValenTime — not Valentine. Time is now. So if you’re looking for a sign — this is it. Don’t waste another moment.

Welcome into a magical 3D world

From the very beginning, we wanted to create something truly magical — light, ethereal, and just a little bit mysterious.
White became the core of our world, symbolizing purity and endlessness. Gold and red served as delicate accents, bringing a feeling of warmth, passion, and something sacred.

When users first open the website, they see a mirror — a portal into another world and a subtle hint at the final scene.
We crafted the mirror as a symbolic threshold between reality and the world of ValenTime. To bring it to life, we combined traditional modeling techniques with procedural scattering, polished the materials using multiple baked maps, and used WebGPU for real-time reflections and fog effects around it.

We started by prototyping the portal. We had several ideas, and what you see on the website is just one of the versions we explored. While portals aren’t a new concept, the ease and performance of implementing it with WebGPU were truly impressive — and we didn’t even need to optimize anything for it to run smoothly.

As the journey begins, the mirror shatters into hundreds of pieces, inviting users to step inside.
The glass breaking simulation and the animation of heart fragments colliding were created and baked in Blender. Our developer then merged these baked animations with real-time code-driven animation to achieve the most beautiful, responsive interaction possible.

When you build a world, every detail matters. We wanted to preserve the magical feeling in everything — including microinteractions and button hovers.

The journey unfolds.

Scrolling through the experience, users move from island to island, following the dramatic story of St. Valentine.

The 3D world isn’t static — it feels alive. The big part of the general mood is fog. Using the Three.js WebGPU examples as a base, we created six different versions — each with its own take on density, noise motion, color transitions, and intensity based on screen areas. Creating these in traditional WebGL would’ve been much harder. But with TSL (Three Shader Language), each variation took just a few lines of clean, modifiable code.

Creating magic with the 3D heart customizer.

At the end of the journey, a heart slowly materializes from shattered fragments — a visual symbol of how love is built, piece by piece.
The heart isn’t just a decoration. It’s alive, glowing softly, floating gently among petals, waiting for you to make it your own.

This is where the experience becomes truly personal.
Through the 3D heart customizer, users can create their own unique heart — choosing materials, adjusting colors, adding frames, placing stickers, and shaping it into something that feels truly theirs.

Technically, the customizer runs fully in 3D using Three.js and WebGPU, allowing for real-time changes with almost no loading time.
We baked high-quality textures (diffuse, roughness, normal maps) in Blender to give the heart rich, tactile materials without slowing down performance.

Once ready, users can generate a link and share their unique heart with the person they love — making it not just a story they watch, but a memory they create.

Welcome to the backstage.

Take a closer look behind the scenes — from building the world and crafting materials to bringing the story to life with animations and real-time interactions.

Step 1. Building the world.

The site features a large amount of geometry, mostly optimized through Houdini (which gives us beautiful, lightweight topology). Still, we wanted to reduce the total site weight further. So, we decided to skip textures on the models (except for the builder) and instead use geometry attributes to define how parts of a model should look — whether gypsum or gold. This significantly reduced file sizes, and TSL made it incredibly convenient to work with those attributes directly in the shader. This was one of the most empowering parts of the process — unlocking flexibility without sacrificing time or visual quality.

Our procedural modeling workflow in Houdini allowed us to move fast and stay flexible. Starting from a single broken column, we procedurally scattered columns, fragments, and storytelling elements to build each island.

But for the floating petals — we wanted a more creative touch.
Instead of procedural scattering, we opened Microsoft Maquette (VR sketching tool) and blocked the petal scatter manually, floating through the scene ourselves.

procedural modeling workflow in Houdini

Step 2. Materials. Finding the right feeling.

Creating the right materials was critical for building the atmosphere we wanted — something magical but grounded, emotional but tactile.

We split our approach:

The heart
For the 3D heart in the final scene, we used a classic baking pipeline in Blender. We baked diffuse, roughness, and normal maps, allowing the heart to have a rich and elegant surface without overloading performance.
The heart materials were kept simple but beautiful, focusing on clean surfaces and customizable color and frame options in the 3D customizer. The goal was to let users feel that they are crafting something pure and personal.

The statues and islands
For the statues and larger environmental structures, we went for a more experimental route.
Instead of using traditional textures, we used vertex color baking — painting color attributes directly onto the models inside Blender. These attributes were read dynamically in the shaders through TSL.
Here we experimented heavily — including trying to achieve a “gold dust” effect, where the statues would subtly sparkle and shimmer like they were coated in a delicate golden mist.
Achieving this effect without heavy textures was key to keeping the scene lightweight, while still creating an atmosphere that felt sacred, mystical, and rich.

Step 3. Animations — making the world feel alive.

The world of ValenTime was never meant to feel static. Every part of the scene was designed to breathe, to shimmer, to invite users to stop and look closer.

Environmental animations
We animated the petals, the statues, the mirror fragments, and small story elements in Blender. These subtle movements — like petals floating softly in the air, or statues gently “breathing” — were baked into the models and then triggered based on scroll position and camera proximity.

Glass shattering animation
One of the first key moments is when the mirror shatters as users start their journey. This was carefully simulated in Blender using physics-driven fracture simulations. After baking the animation, we combined it with real-time interactions to make the break feel alive and responsive.

Heart assembly animation
As users complete the storytelling journey, the heart pieces rise and float together, assembling in midair.
We hand-animated this using Blender’s timeline, ensuring that the movement felt slow, weightless, and almost spiritual — like love being carefully pieced together.

Camera animation
We created a continuous cinematic camera path in Blender, mapping out the journey island by island.
Special care was taken to keep the motion organic and fluid — balancing speed, easing, and focal distance to create a feeling of soft exploration rather than hard cuts or abrupt movements.

Each animation was timed with the storytelling flow, encouraging users to stay longer, feel deeper, and connect emotionally with the experience.

Step 4. Implementation — our first project with WebGPU.

Initially, we planned to use WebGL for the development of the website. But during production, we found ourselves with a bit of extra time — so we decided to experiment and put together a draft version using WebGPU. Since we already use Three.js for development, the switch didn’t require much effort — thanks to the amazing work of the Three.js team, who made the transition to WebGPU incredibly smooth.

Once we had a working version of the scene, we began to explore what WebGPU could unlock creatively. We started with official Three.js examples and gradually built our own custom shaders using TSL — and that’s where WebGPU truly began to shine.

One of the most exciting aspects of using WebGPU is the ability to work with TSL instead of traditional GLSL. TSL feels like a visual node editor — except you’re writing the connections in code. What impressed us most was how robust and stable TSL turned out to be, especially for something still in early stages. Even as we pushed it with experiments, the code held up. No more relying on onBeforeCompile hacks — TSL is cleaner, more readable, and easier to maintain.

WebGPU also changed how we approached post-processing. The pipeline became more flexible — not necessarily simpler, but far more powerful and performant. We’re just scratching the surface, but we’re excited to see what’s coming next… and we’re already planning to push it even further in future projects.

Technologies and tools used

Three.js (WebGPU & TSL)
Blender (modeling, animation, baking)
SideFX Houdini (procedural modeling & geometry optimization)
Microsoft Maquette (VR blocking for petals)
GSAP (scroll-based transitions)
React (frontend framework)
Vercel (deployment)
WebGPU (real-time rendering engine)

When you are creating something new, it’s all about experiments.

While working on Noomo ValenTime, we didn’t just build a website.
We experimented endlessly — with lights, materials, geometry, reflections, animations.
At one point, we had more than a dozen material tests just for the mirror frame, trying to achieve a look of “golden mist.”