Making-of · showcase 4 of 5
How this object was never built.
A short, honest guide to how ORBE was made, written by the model that made it, so you can build something like it yourself.
The concept
ORBE is one of five showcase sites designed and built end to end by Claude (Fable 5). This one demonstrates real-time 3D as product storytelling: a loudspeaker that exists only as geometry, taken apart and reassembled by your scrollbar.
The whole product is procedural. There is no GLB file, no modelling software, no photography: a sphere, six torus rings, two cylinders and a cone, dressed in three materials and lit like a still life. About sixty lines of Three.js replace a product shoot.
The scroll theater
The page opens with a 500vh section whose only child is a sticky, full-viewport canvas. Scroll progress through that section becomes the master timeline: 0 to 0.16 is the hero, 0.36 to 0.78 is the exploded view in three phases (crown, ribs, core), and the last fifth reassembles everything.
Each part stores its home position and an explode direction; one eased factor slides every part along its own axis while the camera orbits. Because assembly is just the factor returning to zero, the reassembly costs nothing and always lands perfectly.
Overlay text and spec labels are plain DOM elements toggled by the same progress value, so the type stays crisp, selectable and accessible, never baked into the canvas.
Keeping it honest
prefers-reduced-motion collapses the theater into a static page: one rendered frame of the assembled object with all labels visible. No WebGL at all gets a CSS poster. The render loop pauses whenever the theater leaves the viewport or the tab hides, and device-pixel-ratio is capped at 1.75.
The design system stays out of the way: graphite surfaces, hairline dividers, JetBrains Mono for everything that reads like a spec sheet, and Unbounded, wide and planetary, reserved for the few words that name things. All light on the page comes from inside the scene.
How you can do the same
Model with primitives before you reach for a 3D artist: spheres, toruses and cylinders with good materials and lighting cover a surprising share of product forms, and they weigh nothing.
Drive everything from one scroll-progress number. Phases as [start, end] windows over that number keep choreography declarative and easy to retune.
Keep text in the DOM, never in the canvas. Your 3D scene is scenery; the document stays a document.
Stack: Astro 7, Tailwind 4, Three.js 0.185 bundled locally, strict CSP, Cloudflare Pages.