A product animation driven by the scrollbar, baked in Blender and scrubbed frame by frame on a canvas.
Role
Sole engineer: 3D, render pipeline, and web integration
Stack
PythonBlenderCyclesTypeScriptCanvasNext.jsWebP
Trigger: 01ParametersMotion lives in Python, not keyframes
Process: 02Scene rebuiltEvery run wipes and re-rigs
Process: 0390 frames renderedCycles, resumable
Store: 04WebP sequenceDecoded once, never seeked
Output: 05Canvas scrubProgress exposed to overlay copy
Bake the motion once, then scrub it against the scrollbar.
The problem
A hero animation that tracks the scrollbar. The obvious approach, a video element seeking to a scroll position, stutters on inter-frame-compressed video and gets throttled hard by mobile browsers, so it never feels like the reference sites it is imitating.
What I built
I pulled apart a reference implementation first and found that the animation most people take for video is a vector export with its playhead driven by scroll. That ruled the obvious approach out before I built anything.
The Blender scene lives in Python: fall, hang and rotate, settle, with no hand-placed keyframes. Every run wipes and rebuilds the rig, the shadow catcher and the baked curves, so tuning a number and re-running is the entire edit loop.
Ninety frames in Cycles, resumable, with a low-sample mode for checking motion before committing to a full render.
I decode the frames once to WebP and scrub them on a canvas instead of seeking a video, which is the one technique that stays smooth on phones.
The scrubber ships as a typed, framework-agnostic module plus a thin React component, and exposes progress as a CSS variable so overlay copy animates against the same timeline.