Paper Background for React

Paper puts a sheet of paper behind your content: a warm tint of your background with a faint vignette at the edges, like a sheet under a lamp, a soft mottle, a fine tooth lit from the top left so every bump throws a tiny shadow, and short, gently curled fibres that slowly fade a little and back. The tooth and the mottle are SVG noise tiles the browser draws once; the fibres are vector curves placed from a fixed seed when the component renders, drawn into two small tiles, so the sheet is the same on the server, on every load and at any size, and stays sharp at any zoom. The only motion is a slow fade of the fibre layer, which the browser composites without repainting; no script runs.

Use it for long reads, letters and print-style pages. For moving film speckle instead of a still sheet, use Grain; for printed dots, Halftone; for another material surface, Marble. Line art such as Topography sits well on a quiet sheet, Origami folds it into a Miura-ori, and Watercolor adds pigment washes.

Installation

Usage

import { Paper } from "@/components/ui/paper";

<Paper className="min-h-[480px]">
  <h1>Field notes</h1>
</Paper>

Paper is a container: your content goes inside it, and the sheet sits behind that content. Give it a size with className; for a whole page, className="fixed inset-0 -z-10" with no children. Set the sheet's colour with paperColor, not a background class: the sheet covers the container's own background.

Demos

An Old Letter

ageSpots={6} scatters six soft, darker blotches over the sheet for a foxed, old-book look. Their places come from the same seed as the fibres, so they never move between renders.

Kraft

paperColor and fiberColor take any CSS colour: a tan sheet with dark brown ink reads as kraft stock, and density={2} doubles the fibres for a heavier, recycled feel.

Accessibility

The sheet 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 fibres hold still at full strength, and in forced-colors mode the texture is hidden. Nothing flashes: the only motion is a fade by a fifth over 20 seconds. The tooth, the fibres and the vignette are faint enough that text in your foreground colour keeps its contrast (the darkest point of the vignette, in a corner, is a few percent darker than the sheet); with your own colours, check your text against the sheet.

FAQ

API Reference