Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/dither-glow.jsonUsage
import { DitherGlow } from "@/components/dithercn/dither-glow";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<DitherGlow position="top" className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}The glow fills its box and shines from position. It uses bayer8, whose 64 tones keep the falloff smooth. Its centre is brightest and it falls off softly, with a slow breath and a little noise at the edge so it never looks like a flat circle.
Examples
Rising behind a headline
With position="bottom" the light sits just below the edge, so only its top shows. The headline sits near the top, on clean paper.
Corner of a card
A corner glow is the quietest way to lift one card out of a row. Setting --dither-paper to the card's background blends the glow into it, and bayer8 gives a finer grain at small sizes.
Any point, any palette
position also takes [x, y] as fractions of the box. With a longer palette the glow steps through each colour from its edge to its core.
Props
| Prop | Type | Default |
|---|---|---|
| position Where the light comes from. Edges sit just outside the box; a point is measured from the top left. | Type: "top" | "bottom" | "left" | "right" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | [x: number, y: number] | Default "top" |
| radius How far the light reaches. 1 reaches the farthest corner. | Type: number | Default 0.7 |
| intensity Brightness at the centre, from 0 (none) to 1 (full ink). | Type: number | Default 0.75 |
| 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", "--dither-ink"] |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer8" |
| 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 |
| 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. See Performance.