No 3D artist. No build step. No editor.
The whole thing is three files — HTML overlay, CSS tokens, one scene script — with Three.js loaded from a CDN import map. It deploys as static files and runs at 60fps on an integrated laptop GPU.
Anatomy of a product hero
The scene language: matte near-black metal, physical glass, and one emissive "alive" element pushed into HDR so the bloom pass makes it glow like a small sun.
Interaction with inertia
What separates "a spinning cube" from a product you want to touch: every input has weight, decay and clamps. Try each one in the embed above.
Rotation carries momentum after release, decaying at velocity × 0.94 per frame — the device feels like it has mass.
Zoom factor clamped to [0.72 – 1.4] and eased at 6% per frame — you can never lose the device or clip through it.
A raycaster (aimed from the frame's own rect, not the window) lights the glass edges when your cursor crosses the cube.
A click under 6px of drag fires uFlare = 1, decaying ×0.955 — driving a shader boost, a shockwave ring, and a bloom surge at once.
Learned the hard way
Real-time 3D fails in spectacular, non-obvious ways. These six rules are written in hours of debugging — each one now lives in the project's skill so no future session repeats them.
A shader's pow(x, 0.5) on a negative base produces NaN; the bloom pass smears that single pixel across the entire frame. Every fractional pow now clamps its base. It looked like random flicker — it was math.
Transmission glass rendered DoubleSide re-sorts its own faces every frame → shimmer. The fix: FrontSide, depthWrite: false, high render order.
The floor Reflector re-rendering the glass from a second camera thrashed the transmission buffer. Glass now lives on its own layer the reflector can't see.
The transmission pass samples the backbuffer — a bright point light behind the cube smears into blobs on its edges. The halo light sits low, offset, far.
Edge overlay lines fought the glass surface. Scaling the line segments to 1.004 — four tenths of a percent — ended it.
Wanting more glow? Don't raise bloom strength (it hazes everything). Push the emissive color above RGB 1.0 and let the threshold do the work.
The agent checks its own pixels
Screenshots of WebGL canvases are unreliable from the outside — so the workflow makes the page photograph itself: the canvas posts a JPEG of its own framebuffer to a tiny local receiver, and the agent reads the file back. Every visual change is verified in actual pixels before it's called done. A ~6KB file means a black frame — and that means go hunt the NaN.
▸ edit main.js — ring emissive → RGB 2.2 (HDR)
▸ reload · canvas → toDataURL → POST localhost:4599
▸ read shot.jpg… 41 KB — frame renders, glow verified
▸ done — seen, not assumed
Everything used, and what it did
Scene, materials, bloom — loaded from jsDelivr, no bundler
Wrote the scene, the brand, the tokens — and debugged its own pixels
Scene language, pitfalls & perf budget, packaged for reuse
Static deploy — the embed above is the production site
index.html + main.js + tokens — read the 633 lines