Motion
Shader-driven motion backgrounds on WebGL and Three.js, with flowing noise fields, parallax, grain, and vignette.
Which motion background should I use?
Full-bleed layers
None of them carry copy. They sit behind a headline you supply.
- Animated Background With Noise Field
- The calmest of the set. A slow field warps toward the pointer and drifts back, leaving anything set on top of it readable.
- Animated Background With Color Bands
- Whatever already sits behind it has to show through. The canvas composites transparent, and that is the real distinction rather than the look.
- Animated Background With Contour Lines
- There are paragraphs to read on top. Drawn in line rather than fill, so the surface stays empty enough to keep body copy legible.
- Animated Background With Warp Tunnel
- Speed and depth are the message. Streaks rush from a vanishing point that follows the cursor, and it is by far the most assertive here.
- Animated Background With Liquid Caustics
- Atmosphere is the whole job. Refracted light gathers into threads that never repeat, and it gathers harder wherever the cursor rests.