Dither Aurora
Hero Backgrounds“Prism Drift” — a WebGL ordered-dither aurora: value noise domain-warped into a slow flow, mapped onto a three-stop gradient, then quantised through a 4×4 Bayer matrix so it renders as a visible pixel lattice, not banding. Pointer parallax is spring-smoothed; renders one static frame under reduced-motion.
Inspired by Paper Design shaders (category) — independently built, not affiliated. Attribution policy
Prism Drift
Installation
npx shadcn@latest add https://parable-three.vercel.app/r/dither-aurora.jsonRuns the shadcn CLI — the component source is copied intocomponents/parable/dither-aurora.tsx. You own it from there.
Usage
The exact code rendering the preview above.
<DitherAurora className="grid h-56 w-full place-items-center rounded-xl">
<span className="font-mono text-xs uppercase tracking-widest text-white/80">
Prism Drift
</span>
</DitherAurora>Props
DitherAuroraProps extends React.HTMLAttributes<HTMLDivElement>
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#8b5cf6", "#ec4899", "#f5a623"] | Two or three hex colours the aurora gradient sweeps through. |
| background | string | "#0f0f10" | Base backdrop colour (also the GL clear colour). |
| speed | number | 0.15 | Flow speed multiplier. ~0.15 is a slow, hero-grade drift. |
| pixelSize | number | 4 | Dither cell size in device pixels — the size of one lattice dot. |
| paused | boolean | false | Freeze the flow (rendering idles; the last frame stays up). |
| grain | boolean | false | Add a subtle animated film-grain pass on top of the lattice. |