Blueprint Background for React

Drafting paper with a fine grid, where technical drawings (an isometric block, a floor plan, a roof truss, a steel section, a stair, a flange) draw themselves stroke by stroke around the edges, hold, and are erased in the order they were drawn, two or three on the paper at a time. Circles are swept round like a compass, and dimension and centre lines and labels follow each outline. It follows your theme: blue linework on a cool white sheet in light mode, pale blue on deep navy in dark. The grid is CSS gradients; each stroke is a thin line that grows from its start, each circle is revealed by a sweeping clip, and the labels fade in, all on keyframes the install adds to your stylesheet. Nothing runs in the browser, and the browser never restyles or repaints while the drawings come and go.

Use it behind design, engineering or architecture pages. For a plain grid without drawings, use Grid Pattern; for dotted paper, Dot Pattern; for contour lines that also draw themselves, Topography.

Installation

Usage

import { Blueprint } from "@/components/ui/blueprint";

Blueprint is a container: give it a size and put your content inside. The paper is part of the look, so it paints its own sheet, light or dark with your theme; text in your foreground colour reads on both.

<Blueprint className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Measure twice, ship once</h1>
</Blueprint>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Blueprint className="fixed inset-0 -z-10" />

Demos

Drafting paper

Graphite on paper: surfaceColor="var(--background)", lineColor="var(--foreground)" and a softened foreground for inkColor put the grid and the drawings in your theme's colours, so it reads as pencil and follows light and dark.

Classic blueprint, faster

The classic look: a royal-blue sheet (surfaceColor) with blue-white lines and ink, in a card. speed={1.5} brings the drawings in faster, and gridSpacing={16} tightens the grid.

Accessibility

The paper is decorative: it's hidden from screen readers and lets every click through to your content. With reduced motion the drawings hold still where they are, a calm sheet with a drawing or two on it, and nothing moves. Nothing flashes: strokes grow over 0.6 seconds, and a drawing holds for several seconds before it's erased stroke by stroke. The drawings sit around the edges, the grid lines are faint (at most 16% of their colour), and the ink is a mid blue on the light sheet and a pale blue on the dark one, so text in your foreground colour keeps its contrast; on the classic blue sheet, use white text.

FAQ

API Reference