Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/noise-field.jsonUsage
import { NoiseField } from "@/components/dithercn/noise-field";
export function Section() {
return (
<section className="relative isolate min-h-[480px]">
<NoiseField mask="center" className="absolute inset-0 -z-10" />
<h2>Your headline</h2>
</section>
);
}The field is fractal noise folded back on itself, so it flows like smoke rather than scrolling. variant changes what the noise draws:
smoke, the default: soft folds that dither into smooth gradients.ridges: sharp creases, like veins or lightning.contours: topographic lines, spaced bybands.marble: warped stripes, also set bybands.
warp, detail and scale shape the noise itself. contrast, coverage and intensity decide how much of it turns to ink. angle and flow set where it drifts, and mask with maskSize clears room for your text.
Examples
Cleared under a headline
mask="center" fades the field to paper in the middle of the box. Use "top" or "bottom" when the text sits at one end, and maskSize to clear more or less.
Fine grain in a dashboard card
A high scale, a low intensity and 2px cells turn it into a texture you notice only when it moves.
Topographic lines
variant="contours" draws the noise as height lines, a good fit for maps and region stats. A bottom mask keeps the numbers on clean paper, and a low flow lets the terrain shift slowly.
Marble with a highlight
variant="marble" with more warp bends the stripes into veins. highlight adds a third colour for the brightest peaks, here the foreground, so the stripes catch the light.
Props
| Prop | Type | Default |
|---|---|---|
| color The ink of the texture. | Type: DitherColor | Default "--dither-ink" |
| highlight A third colour for the brightest peaks. Leave it out for two tones. | Type: DitherColor | Default – |
| background The paper behind. | Type: DitherColor | Default "--dither-paper" |
| variant The shape of the texture: soft folds, sharp creases, topographic lines or warped stripes. | Type: "smoke" | "ridges" | "contours" | "marble" | Default "smoke" |
| scale Size of the features. Higher values give smaller, busier noise. | Type: number | Default 1.3 |
| warp How far the noise folds back on itself, from 0 (plain noise) to 4. | Type: number | Default 1.7 |
| detail Octaves of noise, from 1 (smooth blobs) to 6 (fine grain on top). | Type: number | Default 4 |
| contrast 1 is soft. 2 and up give hard-edged islands. | Type: number | Default 1.2 |
| coverage How much of the box is inked, from -0.5 (sparse) to 0.5 (dense). | Type: number | Default 0 |
| intensity Brightest tone the field reaches, from 0 to 1. | Type: number | Default 0.9 |
| bands Lines for "contours" and stripes for "marble", from 2 to 24. | Type: number | Default 8 |
| angle Direction it drifts in, in degrees. 0 is right, 90 is up. | Type: number | Default 90 |
| flow How fast it drifts along angle, from 0 to 4. | Type: number | Default 1 |
| invert Swaps paper and ink. | Type: boolean | Default false |
| mask Fades the field out where your text sits. "edges" keeps only the middle. | Type: "none" | "center" | "top" | "bottom" | "edges" | Default "none" |
| maskSize How much of the box the mask clears, from 0 to 1. | Type: number | Default 0.5 |
| palette Takes over the colours: paper first, brightest last. Palette names, CSS variable names or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default Built from the colour props |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer8" |
| levels Tones the field snaps to before dithering. Low values give hard steps. | Type: number | Default All the matrix can draw |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast it moves. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| stillTime The moment drawn when motion is off or reduced, in seconds. | Type: number | Default 0 |
| className Size and position. The background fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- With reduced motion turned on, it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a CSS approximation in the same colours.
- It costs one small draw per frame at 30 fps, at one pixel per dither cell. Each step of
detailadds a layer of noise, so lower it on large, busy pages. See Performance.