Shadcn.io is not affiliated with official shadcn/ui
React Grain Background
Animated film-grain texture background for React and Next.js — a 24Hz speckled noise overlay that gives flat surfaces the filmic, tactile depth of Linear, Notion, Arc, and Vercel.
React Grain Background preview
The quiet trick behind every 2025 marketing page that feels "designed" — an animated film-grain overlay that dances just above the surface at 24 cinematic frames per second. Built on a tiny 256×256 offscreen canvas refilled with random noise each tick, then tiled across the viewport so nothing ever stretches or softens. Zero dependencies, negligible CPU, and a single intensity knob takes it from whisper-subtle marketing page texture to heavy 70mm-film grit. Perfect for SaaS landing pages, editorial long-reads, cinematic hero sections, dark-mode portfolios, and anywhere a flat slate needs a heartbeat.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the grain background into my projectRelated Components
Spotlight
Cinematic radial spotlight glow
Fog
Drifting volumetric fog layers
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Aurora
Emerald northern-lights sheets
Light Waves
Ambient vertical color washes
Dot Pattern
Classic Tailwind dot-grid backdrop
FAQ
Was this page helpful?
Sign in to leave feedback.