Backdrop
component / background / marketing
A static pattern layer for the space behind a hero or a section: grid, dots, rings, mesh, noise or hatch, built from theme tokens and masked at the edges.
- type
- component
- files
- 1
- registry deps
- none
- npm deps
- none
installs
- components/automindz/backdrop.tsx
- currentColor and alpha only — no hex, no fixed grey.
- Parent needs relative; add isolate if it layers.
- fade is a mask-image, so nothing ends on a line.
Renders absolute inset-0 -z-10, so its container needs relative — and isolate too if anything else in it is layered, or the negative z-index escapes the stacking context and paints behind an ancestor's background. Built from currentColor and alpha only, with per-theme opacities matched on perceived lightness; pass a colour utility to tint it. fade changes everything: it is a mask-image, so the pattern dissolves instead of ending on a line. Static by design.
Variations
one state per section
Grid
The default. 1px token lines at a 32px pitch, faded at all four edges by two intersected mask ramps — no hard cut-off anywhere along the border.
Every environment, one deploy log
Preview, staging and production read from the same manifest, so a rollback is one commit and not an afternoon. Pattern: grid.
Dots
A tighter 20px pitch. The pitch is clamped to a floor per pattern, so a caller passing size={2} gets a legible grain instead of a moiré smear.
Every environment, one deploy log
Preview, staging and production read from the same manifest, so a rollback is one commit and not an afternoon. Pattern: dots.
Rings
Concentric rings off-centred above the text block, so the densest part of the pattern sits where the copy is not. Radial fade keeps the ring count ambiguous.
Every environment, one deploy log
Preview, staging and production read from the same manifest, so a rollback is one commit and not an afternoon. Pattern: rings.
Hatch
45-degree lines at an 8px pitch — the densest pattern here, and the one that most needs the fade. Shown bottom-faded, which is how a hero hands off to the section under it.
Every environment, one deploy log
Preview, staging and production read from the same manifest, so a rollback is one commit and not an afternoon. Pattern: hatch.
Mesh
Four soft radials of the text colour at different weights. No hue is named anywhere, so it stays a neutral field on neutral tokens and picks up chroma only if the client's foreground has some.
Every environment, one deploy log
Preview, staging and production read from the same manifest, so a rollback is one commit and not an afternoon. Pattern: mesh.
Fade options
The four masks on one pattern. Look at where each panel stops carrying pattern: edges dissolves on all four sides, radial pools in the middle, top and bottom hand off to the next section.
fade="edges"fade="radial"fade="top"fade="bottom"Intensity
Side by side on purpose: density is the variable, so it can only be judged against its neighbours. Noise reads it most clearly. Body text stays above 4.5:1 at every step.
Body copy at this density, on the surface it will actually ship on.
subtleBody copy at this density, on the surface it will actually ship on.
normalBody copy at this density, on the surface it will actually ship on.
strong