No video files. No pre-rendered frames. The character is a fully rigged GLB — bones, weights, and skinning — processed by your GPU on every render tick through React Three Fiber. The walk cycle runs as a live animation, not a sprite sheet.

The challenge was keeping the scroll sync frame-perfect without janking the DOM. The solution: read window.scrollY directly inside useFrame on every tick — no GSAP ScrollTrigger, no React state, no re-renders. The 3D scene and the HTML page share one clock: the browser's native scroll offset.

A custom GLSL vertex shader is injected at material compile time via onBeforeCompile — bypassing Three.js's standard material system to modify the shader source directly. The displacement function uses 3D Simplex noise, displacing each vertex along its normal vector by an amplitude that scales with scroll progress. As you scroll deeper, the mesh tears apart.

To avoid traversing the full scene graph on every frame, compiled shader references are cached into a meshShadersRef array at setup time. The useFrame loop only iterates that cache — keeping the per-frame cost constant regardless of model complexity.