Animated Background With Noise Field

Pro

Full-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

More motion