# Noise — component for textures & overlays (react)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Fine animated film grain crawling over a misty photo, giving it a shot-on-film texture

- **Install:** `npx shadcn@latest add @react-bits/Noise-JS-CSS`
- **Registry:** react-bits · **Framework:** react · **License:** MIT + Commons Clause
- **Docs and preview:** https://reactbits.dev/animations/noise
- **Source:** https://github.com/DavidHDev/react-bits/blob/main/src/content/Animations/Noise/Noise.jsx
- **Example:** https://skills.varg.ai/previews/lib-react-bits-noise.mp4?v=42226 (Captured from the library’s own demo page (React Bits))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Use Noise from React Bits (https://reactbits.dev/animations/noise, MIT + Commons Clause: fine in video). Install with `npx shadcn@latest add @react-bits/Noise-JS-CSS` and lay it over the whole composition as the top layer to glue AI footage, type and graphics together with grain. Set opacity 0.08–0.2, size, blendMode 'overlay' or 'soft-light', contrast, and optional dust, scratches, scanlines and flicker for an old-film look. It redraws random grain in a requestAnimationFrame loop throttled to its own fps. Seed the random generator with the frame number (frame / fps * grainFps, floored) so each video frame gets a fixed pattern. Keep the intensity modest, because heavy grain eats bitrate.

## Used in

- [Music video](https://skills.varg.ai/video/music-video.md)
- [Logo sting](https://skills.varg.ai/video/logo-sting.md)
- [Title sequence](https://skills.varg.ai/video/title-sequence.md)
- [Generative art loop](https://skills.varg.ai/video/generative-loop.md)
- [ASCII & retro looks](https://skills.varg.ai/video/ascii-retro.md)
- [Ambient & lofi loop](https://skills.varg.ai/video/ambient-loop.md)
- [Paper collage & zine](https://skills.varg.ai/video/collage.md)

## More textures & overlays

- [Editorial Flash Overlay](https://skills.varg.ai/component/hf.editorial-flash-overlay.md) — `npx hyperframes add editorial-flash-overlay`
- [Freeze-Frame Dressing](https://skills.varg.ai/component/hf.freeze-frame-dressing.md) — `npx hyperframes add freeze-frame-dressing`
- [Grain Field](https://skills.varg.ai/component/hf.grain-field.md) — `npx hyperframes add grain-field`
- [Grain Overlay](https://skills.varg.ai/component/hf.grain-overlay.md) — `npx hyperframes add grain-overlay`
- [Halftone Field](https://skills.varg.ai/component/hf.halftone-field.md) — `npx hyperframes add halftone-field`
- [Light Leak](https://skills.varg.ai/component/hf.light-leak.md) — `npx hyperframes add light-leak`