Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/plasma.jsonUsage
import { Plasma } from "@/components/dithercn/plasma";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<Plasma className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}Plasma fills its box, so give it a size with className. Four sine waves, one of them circling the centre, add up to a pattern that never repeats. A slow noise warp bends it so it doesn't look mechanical. By default it runs from --dither-paper through --chart-5 to --dither-ink.
Examples
Through a palette
Pass any number of colours from paper to ink. More bands cycle through the palette more often, and blue noise swaps the Bayer grid for an even grain.
Behind a headline
intensity caps the brightest tone, so the crests never reach full ink and the text stays readable. A smaller scale and more warp give fewer, softer shapes.
Coarse and still
Large cells, the 2×2 matrix and only four levels give hard contour bands like an old demo-scene effect. animate={false} holds one frame.
Props
| Prop | Type | Default |
|---|---|---|
| scale Size of the pattern. Higher values pack more waves in. | Type: number | Default 1 |
| warp How far slow noise bends the waves, from 0 (pure sines) to 1. | Type: number | Default 0.3 |
| bands How many times the colours cycle across one wave. | Type: number | Default 1.5 |
| intensity The brightest tone, from 0 to 1. Lower it to put text on top. | Type: number | Default 1 |
| palette Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default ["--dither-paper", "--chart-5", "--dither-ink"] |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| levels Tones the plasma snaps to before dithering. Lower values give hard contour bands. | 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 the waves move. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The plasma fills this box. | Type: string | Default – |
Notes
- The plasma 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 soft CSS blobs in the same colours.
- One draw per frame at 30 fps, at one pixel per dither cell. See Performance.