Animated Background With Noise Field
ProFull-bleed WebGL motion background with domain-warped FBM noise, smooth Gaussian mouse warp, film grain, and edge vignette, built on Three.js with separate light and dark palettes, fully configurable color and motion props.
When to use Animated Background With Noise Field
A slow noise field that warps toward the pointer and drifts back when it leaves. It carries no copy of its own by design: this is a layer to put a headline on top of, not a hero you fill in. Of the three backgrounds here it is the calmest, which makes it the one that survives being looked at for more than a few seconds.
Every colour is a prop and light and dark palettes ship separately, so it can be tuned to a brand rather than accepted as drawn. Two things to plan for. The field's brightness moves, so anything readable above it needs its own scrim rather than trusting contrast against an average. And it compiles a shader before the first frame, so give the section a solid background colour underneath and it will fade in over that instead of over a white flash.
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
- 524 lines, 18 KB in one file
- Install
wensity add animated-background-with-noise-field --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, mouse, light, dark, background
- Last updated

