Page weight
One HTML file
No framework, no web fonts, no image requests - the object is drawn, not downloaded.
Scroll-driven motion & real-time 3D
Motion that answers
to the scrollbar.
Every frame below is drawn in the browser from twelve vertices and twenty faces. No 3D library, no model file, no video - one static page that stays scrubbable in both directions.
Scroll to drive the sequence · drag the object to orbit it
Assembled
The whole form, one silhouette. Rotation is a pure function of scroll offset, so the motion is scrubbable in both directions and never fights the user.
Separating
Each face travels along its own normal. One scalar drives the whole sequence, which is why it stays smooth on a phone as readily as on a desktop.
Exploded
At full separation the interior reads clearly. The same scalar drives the caption swap, so copy and motion can never drift out of sync.
Resolved
Reversing the scroll reassembles it exactly. No timeline to re-cue, no state to reset, nothing to get stuck half-played.
Interaction is part of the render, not a layer on top
These controls write into the same state the scroll handler does, so nothing has to be reconciled afterwards. Drag the object directly to orbit it.
How it is built
Geometry
Software rasteriser
Perspective projection, back-face culling, painter's sort and flat shading, all in plain JavaScript on a 2D canvas.
Scroll motion
One listener
A single rAF-throttled handler computes progress; every animated property is derived from it.
Interaction
Drag to orbit
Pointer and touch both supported, with the configurator writing straight into the same render state.
Responsive
320px and up
The stage re-measures on resize and honours devicePixelRatio, so edges stay crisp on retina displays.
Reduced motion
Respected
With the OS setting on, the object holds a readable static pose and the captions still advance.