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
• Logo sting
• Title sequence
• Generative art loop
• ASCII & retro looks
• Ambient & lofi loop
• Paper collage & zine

More textures & overlays

• Editorial Flash Overlay — npx hyperframes add editorial-flash-overlay
• Freeze-Frame Dressing — npx hyperframes add freeze-frame-dressing
• Grain Field — npx hyperframes add grain-field
• Grain Overlay — npx hyperframes add grain-overlay
• Halftone Field — npx hyperframes add halftone-field
• Light Leak — npx hyperframes add light-leak