Inspiration We kept a folder of the sites that made us stop scrolling and just stare — Oryzo, Cartier's Watches & Wonders, IVRESS. None of them told a story or solved a problem. They handed you a beautiful material and let you touch it. That was the thesis: in 2026, with WebGPU finally safe to ship, the web can render matter that doesn't exist — liquid gold, black glass that remembers light, matter caught in the act of becoming a star. So we didn't build a website about something. We built a substance, and gave you your hands.
What it does AURUM is a single living material suspended in a black studio void. You don't navigate it — you play it:
Move to sculpt it — the surface reaches toward your cursor. Scroll to transmute it through four states of matter: I · AURUM (liquid gold, breathing), II · VITRUM (black obsidian glass), III · GLACIES (frozen crystalline geometry), IV · STELLA (matter becoming light). Hold to agitate it — the substance grows restless under pressure. Every state is the same object — only its physics, motion, sound, and light change — so it stays cohesive by construction. A generative score, synthesized live in the browser, crossfades a chord per state and lands a sub-bass swell each time matter changes phase. There is almost no text. The material carries everything.
How we built it Rendering: vanilla Three.js r185 on the WebGPU renderer with TSL (Three Shading Language) node materials — WebGPU-first, with an automatic WebGL 2 fallback so it runs everywhere (a live badge shows which backend you got). The substance: a displaced icosphere whose surface is a TSL scalar field — layered flowing noise + a pointer "reach" bump + a click ripple — driving both the vertex displacement and the shading normals so light always agrees with the shape. Materials: a single MeshPhysicalNodeMaterial whose metalness, transmission, iridescence, clearcoat, and emissive veins are all interpolated per frame between four hand-tuned states. Light & post: a procedural studio environment (RoomEnvironment → PMREM) for the long liquid-metal highlights, then a node RenderPipeline with bloom and vignette. Sound: a small generative synth built directly on the Web Audio API — no audio files, no licenses. Four stacked chords, a filtered "solar wind" noise bed, and pointer-reactive shimmer. Shell: a thin React layer for the UI, entry gate, and audio unlock; all the 3D is vanilla for full control. Challenges we ran into WebGPU in 2026 moves fast, and that bit us in instructive ways:
The postprocessing class had been renamed mid-cycle (PostProcessing → RenderPipeline) — our first render was a black screen with only a deprecation warning to go on. THREE.Points render at a fixed 1 pixel under WebGPU, so our entire dust layer was silently invisible. We rebuilt it as instanced sprites. Our "ice" facets were a lie — quantizing the displacement height still produced smooth normals. We had to quantize the shading normal onto a direction lattice to get real crystal faces. Evaluating the surface field in the fragment shader was ~55 million noise lookups per frame. Moving it to the vertex stage cut that to ~1 million. Toggling glass transmission recompiled the shader mid-experience; muting audio during the intro fade could silently un-mute itself. Both were subtle, both are fixed. Accomplishments that we're proud of It's WebGPU-first with a graceful fallback — the actual 2026 award-tier stack, not a demo hack. Zero external assets. Every pixel and every note is generated at runtime — the environment, the material, the dust, the entire score. We ran the finished code through an adversarial multi-agent review across four lenses (API correctness, logic, art direction, performance), which surfaced 19 real issues we fixed before calling it done — including the invisible dust and the fake facets above. One object, four states, and it never looks cluttered. Restraint as a feature. What we learned How to think in nodes instead of GLSL strings, how WebGPU's render-pipeline and compile model actually behaves under state changes, and how much of "premium" is really just light discipline — a good environment map and a restrained bloom do more than any amount of geometry. We also learned that sound is the most underused tool on the web: the generative score did half the emotional work for a fraction of the bytes. And that performance is the aesthetic — a janky 30fps blob is not beautiful no matter how good the shader is.
What's next for theQari Creates More states of matter — smoke, mercury, growing crystal — and letting visitors blend between them freely rather than in a fixed sequence. A shareable permalink that captures your exact material as a still, so people can trade the substances they discover. WebXR — this thing wants to be held in VR. WebGPU compute for a true ferrofluid simulation, and deeper mobile tuning so the full experience travels to every pocket.
Log in or sign up for Devpost to join the conversation.