Noise Field
A free animated noise background with living film grain.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Noise Field is a free noise background React component for Next.js and React, styled with Tailwind, that layers fine SVG film grain behind your content. Two locally owned turbulence filters use different seeds and density, with one wrapper jumping through four small positions to create living static while the other remains fixed.
Only the outer wrapper transform animates, so the SVG filters stay static and never re-render per frame; the decorative layer ignores input, pauses automatically while fully offscreen, and becomes one still grain layer when reduced motion is enabled.
Living texture
Film grain that moves without moving the page
Two fine noise layers add depth behind this copy. One jumps through four tiny offsets while the other stays fixed, then the whole effect pauses offscreen and becomes a single static texture when motion is reduced.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-noise-fieldUsage
import { BgNoiseField } from "@/components/bg-noise-field";
export function Example() {
return (
<section className="relative overflow-hidden bg-background">
<BgNoiseField />
<div className="relative">
<h2 className="text-4xl font-semibold text-foreground">
Your content here
</h2>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Noise Field exposes one Tier 3 CSS custom property. Override --noise-opacity on :root or any ancestor to tune the strength of each grain layer without changing its density, colour or movement.
:root {
--noise-opacity: 0.12;
}Frequently asked questions
- Is Noise Field free for commercial use?
- Yes. Noise Field is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Noise Field accessible and performant?
- Yes. The entire effect is aria-hidden and cannot receive pointer input or focus. Its SVG filters remain static while one outer wrapper animates with stepped transforms only, the loop pauses offscreen, and reduced-motion users receive one fully static grain layer.
- How do I change the grain strength?
- Override --noise-opacity from :root or any ancestor. The default is 0.08 for each layer, and lowering it makes the texture quieter without changing the fixed turbulence filters.