What the Frontend? Open the interactive gallery →
3D & WebGL

3D scroll scene

A Three.js scene whose camera animates through a path driven by scroll position.

What you're seeing

Scroll down and fly through a 3D environment — the camera moves along a path, objects zoom past.

Where you'll see it

Product showcases, brand storytelling.

Difficulty

Advanced — 5/5

Libraries that build it

Three.jsGSAP ScrollTriggerReact Three Fiber

From the toolbox

Three.jsThe reason the browser does 3D at all. Every drivable world and scroll-through bookshelf in this gallery starts here.

Ready to prompt — paste this into your AI coding tool

"Animate Three.js camera along a CatmullRomCurve3 path using GSAP ScrollTrigger, map scroll progress to curve t parameter"

Seen in the wild

Pacôme PertantA motion & sound designer’s reel as a floating 3D spiral — project cards warp and motion-blur as they orbit past.Explore PrimlandA luxury resort sold as a 3D landscape — an immersive Blue Ridge Mountains map you fly through instead of a brochure you scroll past.Stripe PressA bookshelf you scroll like a real one — each title a physically modeled 3D book that rotates from spine to cover as it passes.

Related 3D & WebGL effects

Floating 3D objectShader distortionParticle system3D textWebGL image hoverNoise terrain
See the animated preview in the dictionary →