Halftone Background for React

Halftone fills the box with a grid of dots whose sizes follow a slowly drifting field of light and shade, the way newsprint prints a photograph: big dots where the field is dark, small ones or none where it's light. The sizes come from a CSS trick rather than a canvas. Each cell is a soft radial gradient, a field of rings and bands is laid over it, and a high-contrast filter turns the sum into crisp dots; only the field moves, by CSS transforms the browser composites without repainting. A blend then inks the dots in your colour and drops the paper onto the container's own background.

Use it for print-inspired heroes, editorial pages and zine-style cards. For an even dot grid that doesn't change, use Dot Pattern; for cells that fade instead of grow, Flickering Grid; for film texture instead of print, Grain. It belongs on Paper, and Circles draws the same concentric rings as lines. For a grid pushed around by a moving wave, use Wave Grid.

Installation

Usage

import { Halftone } from "@/components/ui/halftone";

<Halftone className="min-h-[480px]" fade="top">
  <h1>Printed in dots</h1>
</Halftone>

Halftone is a container: your content goes inside it, and the dots sit behind that content. Give it a size with className; for a whole page, className="fixed inset-0 -z-10" with no children. The paper is the container's own background (bg-background by default): the blend keeps light paper in light mode and dark paper in dark mode, so for a dark band on a light page, add the dark class to the container.

Demos

Riso Pink

dotColor takes any CSS colour, and the dots come out exactly that colour on light or dark paper. dotSize={10} gives a finer grid, intensity="strong" grows the largest dots until they touch, and fade="bottom" clears the dots at the bottom, where copy can sit.

Inside a Card

intensity="subtle" keeps every dot under half a cell, quiet enough for a small card, and speed={0.5} halves the drift.

Accessibility

The dots are decoration: they're hidden from assistive tech and never take the pointer, so everything you put inside works as usual. With reduced motion the field holds still, a still halftone, and in forced-colors mode the dots are hidden. Nothing flashes: the field takes 24 seconds to come round. Dots behind text make it busier, so fade them behind your copy with fade, or use intensity="subtle", and keep the text in your foreground colour.

FAQ

API Reference