Three.js and WebGL effect examples
These examples run on the GPU: Three.js scenes, raw WebGL with GLSL shaders, and one WebGPU hero. Fluid simulations solve the Navier-Stokes equations on the graphics card so ink, lava or water reacts to the cursor. Image effects map photos onto planes and bend them with refraction, fractal glass, grid deformation or a page curl tied to scroll. 3D galleries place images on cylinders, spirals, spheres and tunnels that you scroll or drag through.
Scroll experiences load glTF models and move a camera through them with GSAP ScrollTrigger, and a product viewer switches PBR materials and glass transmission in real time. WebGL is the right tool when the effect needs per-pixel control or real depth, and the wrong one for anything CSS transforms already do. These are the heaviest components in the library, so each page lists the performance cost and, where it has been checked, whether the effect is safe on mobile.
The examples
Other categories
- GSAP scroll animation examples
- GSAP menu animation examples
- GSAP slider and carousel examples
- GSAP hover effect examples
- GSAP text animation examples
- GSAP preloader examples
- Page transition examples: GSAP, Barba.js and View Transitions
- GSAP image gallery examples
- GSAP card animation examples
- Interactive cursor and physics effects
- Animated footer examples