Grain
A film-grain overlay that removes banding from gradients, with an optional jitter.
- Category: Backgrounds
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Grain
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
opacity | number | 0.08 | |
animated | boolean | true |
About Grain
Grain lays a film-grain texture over a section, which removes the banding gradients get on large screens and adds a tactile, analogue feel. An optional jitter animates it.
Grain is an animated background for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Grain
- Over gradients and shader backgrounds.
- Editorial and photography sites.
- Retro and analogue brands.
- Hero sections that look too clean.
How it works
The texture is an SVG turbulence filter rendered once as a tiled background; jitter shifts it in steps. It is a pointer-transparent overlay.
The whole layer is decorative and aria-hidden, sits behind your content without taking pointer events it does not need, and pauses when scrolled off screen. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Grain
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- opacity (number, default 0.08).
- animated (boolean, default true).
Goes well with Grain
Grain is already composed into a ready-made section, so you can see it in context or install the whole block.
- Hero Film: Hero section
- Dot Grid: An interactive React dot grid background whose dots swell near the pointer
- Ember Field: An animated React ember background: glowing embers drift up and flicker as they cool
- Smoke: A slow React smoke background: blurred plumes drifting over dark sections, CSS only
- Aurora: An animated React aurora background: soft light bands drifting across a section
- Grid Beams: A React grid background with beams of light running along its lines
Install Grain
npx shadcn@latest add https://charcoalui.com/r/grain.jsonGrain is free and MIT licensed. The command copies grain.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Shader Gradient, a Pro piece: A WebGL mesh gradient: domain-warped noise folding three colours together, with film grain. Falls back to CSS without WebGL.
Frequently asked questions
- How do I install Grain?
- Run npx shadcn@latest add https://charcoalui.com/r/grain.json. The shadcn CLI copies grain.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Grain free for commercial use?
- Yes. Grain is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Grain work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Grain?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Grain's props and source and get_install_command returns the exact command.