Three.js and WebGL
Live Three.js examples where scroll drives a 3D scene: product turntables, particles, glass and shaders. Free demos with knobs; exact prompts and source for subscribers.
A 3D scroll site moves a camera, a model or a shader as the visitor scrolls. Done well it makes a product feel physical; done badly it is slow and nauseating. The examples here are built to be the first kind.
They come from the library: scenes that react to scroll position, 3D objects with lighting and materials, particle fields and shader effects, each running live with Playground knobs for camera, speed and colour. Heavier scenes are labelled so you can choose with performance in mind.
If you build with an AI tool, 3D is where a vague prompt fails most often, because a result depends on exact camera values, material settings and fallbacks. The prompts and source files here give those values, plus a lighter fallback and a reduced-motion path.
Showing 10 · 31 effects and 46 templates use this
Featured medium A full-screen fragment shader folds three ribbons of aurora colour through layered fbm noise above a dark horizon, lets the pointer bend the curtains with a lagged lens, adds grain and a vignette; a CSS gradient stands in without WebGL or with reduced motion.
Featured WebGL A pinned, scrubbed scroll flies a Three.js camera along a Catmull-Rom spline through floating prints, accent rings and drifting particles, aiming a little ahead of itself; fog keeps the far work soft and DOM captions land at four waypoints.
Featured medium A full-bleed WebGL plane dissolves into a mosaic (cells grow 1 → 48 px), swaps to the next of three procedural pictures at the coarsest moment and sharpens back — on click, or automatically every 4 seconds.
Featured WebGL Twenty-four procedurally painted posters spiral down a fog-filled tunnel; wheel, drag or swipe sets the camera's speed, idle autoplay keeps it drifting, and plane depths wrap modulo the loop so the archive never ends.
Featured WebGL A Three.js plane shows a procedurally painted image that warps like liquid under the pointer (noise UV displacement weighted by distance and speed, with a velocity-driven RGB split); hovering a swatch melts it into a second image.
Featured WebGL Thirty thousand additive points morph between a sphere, a torus knot, a cube and a heart; every particle starts on its own random schedule and takes a swirling detour, so each change of shape reads as a swarm rather than a slide.
medium One incense stick in a glazed bowl of ash on ivory paper. A thin smoke ribbon rises straight from the ember, curls into turbulence and fades; move the pointer near it and your breath bends it. Six blends.
medium Full-screen crushed velvet shaded fibre by fibre. Drag across it and the pile flips along your stroke, leaving lighter or darker trails that slowly lie back down. Eight colourways, light-first.
medium A plate breaks into irregular noise patches with a glowing rim and the next picture shows through — fractal noise compared with an animated threshold; it assembles on entering view, advances on click, scrubs with scroll or follows a manual threshold.
medium The pointer drags a wake of noisy distortion through a full-bleed dusk-dune picture: a decaying float trail buffer masks an fbm displacement with static rows, grain and RGB split, widening with pointer speed, then heals.
Check the performance label and the measured numbers. A good 3D page caps pixel ratio, pauses off screen and has a static fallback.
The knobs expose camera and material values, so you can tune a scene before you commit to a prompt.
Devices without WebGL, or with reduced motion on, get a readable static version of the page.
Prompts Pro $169/month · All Access $299/month (prompts and source for everything) · single template $39 one-time. See pricing.
Many run fully, others degrade, and a few are desktop only. Each effect states its mobile support.
No. The prompt tells your AI tool what to build. If you do know it, the source files are readable and commented.
Models in the library are original or CC0, with the licence recorded next to each asset.
Yes. Many templates mix a 3D scene with GSAP ScrollTrigger, and the Prompt Builder can combine several effects into one master prompt.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…