scroll-experiences

Place the canvas in a fixed-position container at z-index 0 with pointer-events none, and scroll content in a relative container above it. Feed a single normalized progress value from ScrollTrigger into your render loop, damping it with lerp so camera motion stays smooth.

Never read scrollY inside the render loop since it forces synchronous reflow. Instead, update a target progress value via ScrollTrigger onUpdate, then interpolate toward it each frame with a factor like 0.08 before positioning the camera.

Choose the lowest category that achieves the effect: CSS scroll-driven parallax handles most requests at trivial cost. Reserve persistent WebGL scenes for cases where the background genuinely needs 3D, since they add megabytes of bundle and battery drain.

Yes, but the scene must degrade to a static representative frame or plain background, and the WebGL bundle should not load at all. The narrative content and order remain identical; only the motion is removed.

Common causes are multiple competing requestAnimationFrame loops, reading scrollY per frame, missing damping on touch inertia, and rendering at native 3x pixelRatio. Cap pixelRatio at 2, use one loop, and strengthen the lerp damping for touch scroll.

Avoid hijacking scroll whenever possible because it breaks keyboard navigation, screen readers, and user expectations. If unavoidable, provide an exit path and equivalent keyboard navigation, and ensure pinned sections remain reachable by Tab in the correct order.