Grain Background for React

Grain lays fine film grain over any surface: a speckle you feel more than see, re-rolled 24 times a second like grain in projected film. The noise is two small SVG tiles of different sizes, drawn once by the browser; keyframes the install adds to your stylesheet jump them to new offsets in steps, so no JavaScript runs and nothing repaints while it moves. The tiles' noise is tuned so it never beats against the pixel grid, so no woven pattern or tile grid shows, at 1× or on a retina screen. It takes your theme's foreground colour, so it's dark print grain on a light page and pale film grain on a dark one.

Put it over a flat colour or a gradient to take the digital flatness off a hero. For a texture that holds still, use Paper; for print dots rather than film grain, Halftone. It pairs with Mesh Gradient underneath, or with Spotlight for a cinematic glow. For signal noise that tears and shifts, use Glitch; for a quieter, static texture, Dot Pattern.

Installation

Usage

import { Grain } from "@/components/ui/grain";

<Grain className="min-h-[480px]">
  <h1>Every surface has a texture</h1>
</Grain>

Grain is a container: your content goes inside it, and the grain sits behind that content and above the container's own background. Give it a size, a background colour or a gradient with className; for a whole page, className="fixed inset-0 -z-10" with no children.

Demos

Grainy Gradient

Put the gradient on the root with className, and the grain lands on top of it. intensity="strong" and grainColor="white" give the gritty look that suits a dark, saturated gradient.

Warm Film

grainColor takes any CSS colour: amber over dark brown reads as warm film stock. speed={0.5} halves the rate to 12 jumps a second, for a slower, drifting grain.

Accessibility

The grain is decoration: it's hidden from assistive tech and never takes the pointer, so everything you put inside works as usual. With reduced motion the grain holds still, as a texture, and in forced-colors mode it's hidden. Its overall brightness stays the same from one step to the next, so it doesn't flash; speed is capped at twice the default. At the default intensity the specks cover a few percent of the surface at low opacity, so text in your foreground colour keeps its contrast; use intensity="subtle" behind small body text over a busy gradient.

FAQ

API Reference