# Fx Noise Grain

Gradient landing hero with fine film grain to remove colour banding.

- id: `fx-noise-grain`
- Page: https://agentic-ui-kit.com/components/fx-noise-grain
- Live preview: https://agentic-ui-kit.com/live/component/fx-noise-grain

## Install

```bash
agentic-ui add fx-noise-grain
npx shadcn@4.17.0 add @agentic-ui/fx-noise-grain
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** generated-svg-turbulence-tile, fine-coarse-paper-textures, token-tinted-grain-mask, blend-mode-overlay, fx-intensity-scaling, stepped-8fps-shimmer, offscreen-pause, motion-personality-gating, reduced-motion-static-tile, decorative-aria-hidden
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, marketing, ai-workspace, media, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Gradient landing hero with fine film grain to remove colour banding, Glass pricing or feature card with a static grain finish, Editorial or print-style section with paper fibre texture, Poster-like product card with coarse grain and an optional stepped shimmer
- **Avoid when:** Dense data tables, charts or forms where texture competes with information, Photography or video that already carries its own grain, Surfaces where exact flat brand colour must be reproduced
- **Preserve when adapting:** decorative-layers-aria-hidden, content-above-grain, static-tile-when-motion-is-off
- **Replace when adapting:** variant-and-scale, tone-and-blend, opacity-and-intensity
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 8 fps
- **Registry dependencies:** fx-foundation, lib-motion