Animated Background With Color Bands
ProFull-bleed WebGL background with flowing color bands, pointer parallax, warp strength, and configurable palette, built on Three.js with transparent compositing, film grain, and light/dark defaults.
When to use Animated Background With Color Bands
Wide bands of colour sliding past each other with parallax tied to the pointer. The distinguishing feature is not the look but the compositing: the canvas is transparent, so whatever already sits behind the section keeps showing through. That is the reason to pick this one over the other two. It adds a layer to a design you have rather than replacing the surface underneath it.
Practically, that makes it the easiest of the three to retrofit into an existing page, and the easiest to overdo. Warp strength is a prop and the default is tuned for a section with little text; bring it down when there are paragraphs to read, because bands moving behind body copy is the fastest way to make a page tiring. The palette has light and dark defaults and both are overridable.
Block details
- Category
- Motion
- Renders
- WebGL canvas. Compiles a shader before the first frame
- Theme
- Follows the site theme in light and dark
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
@react-three/fiberclsxnext-themestailwind-mergethree- Source
- 530 lines, 17 KB in one file
- Install
wensity add animated-background-with-color-bands --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- webgl, three.js, shader, bands, glow, parallax, light, dark, background
- Last updated
