NoiseOverlay

Shared

Film-grain noise texture overlay using an SVG feTurbulence filter with direct DOM animation.

Install

npx bouncekit@latest add noiseoverlay

Import

import { NoiseOverlay } from "@/components/shared/noise-overlay"

import { NoiseOverlay } from "@/components/shared/noise-overlay"

// In your root layout:
<NoiseOverlay />

// SVG feTurbulence film-grain overlay.
// Zero JS — resolution-independent, GPU-composited.
// Props: opacity (0.035), frequency (0.65).

API Reference

Prop	Type	Required	Description
`opacity`	`number`	—	Overlay opacity. Default: 0.03.

Source

src/components/shared/noise-overlay.tsx

Components/Shared/NoiseOverlay