StaticNoise
SVG grain overlay — turbulence filter with optional animated seed cycling and blend-mode control.
StaticNoise paints a full-bleed decorative grain layer as a figure with an internal SVG turbulence filter. It is always aria-hidden — texture on top of photography, gradients, or Surface fills, not information.
Opacity and blend mode control how strongly the grain reads against what sits underneath; you can also adjust the noise scale. Leave animation off for a fixed grain plate, or turn it on for living static. Position the figure absolutely over the target region (inset: 0 on a position: relative parent) and keep interactive content in a sibling layer above the noise.
Performance cost
StaticNoise runs SVG turbulence and is memory-heavy. Prefer one focal overlay per view. Do not wallpaper every card in a dense grid.
When to use
- Gradient heroes or product cards that need photographic film grain
- A single vibrant surface where living static adds atmosphere without a motion accent like Beam
- Soft-light grain over photography so media reads like an archive print
When not to use
- Edge dissolve over scrolling content → ProgressiveBlur
- Continuous border or pulse accent → Beam
- Wallpapering every card in a dense grid
Related
- ProgressiveBlur — edge fade over scroll or media
- Surface — relative overflow shell for the overlay
- Skeleton — structural loading placeholders (not grain)
Common examples
Fixed grain wash
A gradient panel with a fixed grain wash is the usual StaticNoise composition. Content sits above the figure so CTAs stay clickable while the plate still blends through the scene.
opacity={0.28} lifts the grain a notch above the default so it reads on a dark gradient.
Living static
animate cycles seed frames for a living grain plate — useful on a single vibrant product card where the atmosphere should feel awake without a motion accent like Beam.
Soft-light over media
Raise the noise scale and switch the blend mode to soft-light when grain should sit like film over a photo instead of a hard difference plate. Caption chrome stays above the overlay.
StaticNoise is decorative only — accessible names and actions live on the content above it, not on the grain plate.
Ask your agent
Add subtle film grain over this dark gradient hero so the panel feels photographic. Keep the Open workspace button clickable above the grain.Last updated on