UI in motion — a scroll-driven 3D reel

A 3D-rendered hero reel, shipped scroll-driven. Instead of running a live Three.js / WebGL scene — GPU-heavy and janky on mid-range phones — the 3D work is pre-rendered to a 1080p image sequence and scrubbed frame-by-frame on a 2D canvas as you scroll. All the depth, none of the runtime cost.

A real-time Three.js scene gives you interactivity, but it costs a WebGL context, shader compilation, and a steady GPU draw on every frame — which shows up as jank and battery drain on mid-range phones. When the 3D is non-interactive eye-candy, you do not need any of that.

The 3D scene is rendered once, offline, to a 241-frame 1080p sequence. In the browser a tall section pins a full-viewport canvas; scroll progress from 0 to 1 maps to a frame index and paints it cover-fit. No decode lag, instant scrubbing in both directions, and a separate sequence per theme.