Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/retro-grid.jsonUsage
import { RetroGrid } from "@/components/dithercn/retro-grid";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<RetroGrid className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}The floor is a grid seen from a low camera, scrolling slowly towards you. Lines stay about one cell wide at every depth and fade out where they would crowd closer than a few cells, so the horizon doesn't break into moiré. The sun sits half sunk behind the horizon, with slits through its lower half that thicken towards the ground and drift down. Grid squares keep their size against the box height, so a phone shows fewer columns, not thinner ones.
Examples
Sunset
Four warm colours, from a deep violet paper through magenta to a pale gold sun. A bigger sun and cell={4} give it the chunky look of an old game.
Without the sun
sun={0} leaves only the glow along the horizon, which clears the sky for a headline.
Props
| Prop | Type | Default |
|---|---|---|
| horizon Height of the horizon, from 0 (bottom) to 1 (top). | Type: number | Default 0.42 |
| sun Size of the sun as a share of the box height. 0 hides it. | Type: number | Default 0.4 |
| columns How many squares across the front of the floor in a 16:10 box. Narrower boxes show fewer. | Type: number | Default 12 |
| palette Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default Paper, two tints of --dither-ink, then --dither-ink |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast the floor scrolls and the sun's slits drift. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The scene 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 horizon line, a soft sun and a fade in CSS.