-
Home Page
-
# Study
-
# Form
Inspiration
It started with a single image — a bloom of interwoven, glowing ribbons suspended in a nebula, with the word QUANTUM across it. Static, it was striking. But it felt like it wanted to move — like a thing caught mid-collapse from possibility into form. We wanted to see if we could pull that structure into three dimensions and let it live.
What it does
Quantum is a responsive, fully 3D landing experience built around a hand-modeled lattice "bloom" — seven petal-rings splayed and tilted around a glowing core, woven with a second counter-rotating ring set for depth. It reacts to cursor and touch input, drifts through a particle-dust nebula, and gracefully dissolves into a content section as you scroll — all while staying performant and legible from a phone screen to an ultrawide monitor.
How we built it
Three.js for the scene — no heavyweight framework, just a single HTML file with a render loop, so it's easy to drop anywhere. The centerpiece isn't a stock geometry; it's assembled from flattened torus "petals" positioned by hand at calculated yaw/tilt angles so they'd converge at a shared center, echoing the original artwork's structure rather than approximating it with a generic knot or sphere. Typography, color, and motion timing were tuned to match the moody teal/amethyst/champagne palette from the source image, with prefers-reduced-motion respected throughout.
Challenges we ran into
Getting a procedural shape to actually resemble organic reference art was the hard part — early passes (a torus knot) were technically "3D and rotating" but read as generic. It took several iterations of the petal math — position offsets, alternating tilts, layered ring counts — before it stopped looking like an abstract knot and started looking like the flower it was supposed to be. Balancing particle count and additive blending against mobile performance was the other constant tug-of-war.
Accomplishments that we're proud of
The bloom shape genuinely holds up against the original artwork rather than just gesturing at it. It's also fully responsive without a second breakpoint-specific version — one geometry, one set of rules, scaling cleanly from mobile to desktop.
What we learned
Fidelity to a reference image is less about polygon count and more about getting the structural logic right — why the shapes converge where they do, why they tilt the way they do. Also: additive blending is extremely forgiving for making cheap geometry look luminous.
What's next for Quantum
Swapping the flat wireframe petals for a shader-based fresnel/glass material to get closer to the original's glassy, occluded surfaces; adding scroll-scrubbed camera movement through the lattice; and possibly generative variation so no two loads produce quite the same bloom.
