Mobile is a parallel implementation, not a degraded desktop
- Mobile
- Design
- Performance
Below 768px this site swaps WebGL for SVG and keeps every beat. The version that dropped the concept on phones shipped first, and it was worse than no concept at all.
The first mobile treatment was a one-shot illustration at the top of the page. The object appeared once, then five screens of text scrolled past nothing. It passed review because each screen looked fine in isolation, and it was completely wrong, because the entire argument of the design is that the object persists and you travel through it.
A mobile version that keeps the layout and drops the idea has kept the wrong half.
The same concept, different primitives
Below 768px there is no WebGL. There is still an object, it is still behind the content, and it still runs every beat — it is SVG and CSS transforms instead of shaders.
- Desktop layers explode along Z. Mobile fans them along Y, because depth is invisible in portrait and a Z explosion reads as nothing happening.
- Desktop prints separation as a live coefficient. Mobile prints the beat as a word — Peeled, Exploded — because a four-decimal readout on a phone is decoration.
- Desktop has corner readouts and a right-edge depth rail. Mobile has one bottom strip, because the margins do not exist.
These are different designs solving the same problem under different constraints, which is the actual definition of responsive — not one design squeezed until it fits.
They cannot drift
Both read the same scroll store and the same section bounds, so the two implementations stay synchronised by construction rather than by discipline. Neither mounts on the other's breakpoint.
// useSyncExternalStore, not useEffect + useState.
// The effect version renders the wrong branch for one frame,
// which on a fast connection is a visible flash of the desktop
// object on a phone.
const isDesktop = useSyncExternalStore(subscribe, get, getServerSnapshot)The type scale was the other half of the work
Every heading uses clamp with a vw coefficient. The original coefficients were tuned at desktop and all bottomed out at their floor by 390px — which meant the services heading and the philosophy heading rendered at identical sizes and the hierarchy collapsed entirely.
That class of bug is invisible at the width you design at. Anything using clamp gets checked at 360, 390, 430, 768 and 1280, and the audit is a script in the repo rather than a promise to remember.