Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/dither-orb.jsonUsage
import { DitherOrb } from "@/components/dithercn/dither-orb";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<DitherOrb color="purple" className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}The orb is a sphere shaded by one light, with a soft terminator, a thin rim light on the shadow side and a dithered glow that falls off around it. Its outline breathes with two slow harmonics and a little noise (morph). When the pointer moves anywhere on the page, the orb and its light ease towards it, then drift back to the centre when the pointer leaves.
Pass highlight for a third, brighter tone on the specular spot, such as "#fff" or a pale mix of the orb colour. Pick a colour that is light in both themes: "--foreground" turns black in light mode.
Examples
Assistant hero
A purple orb with a pale highlight above a prompt.
Voice status
A 64px orb on a transparent background, with more morph and no lean, as a listening indicator.
Props
| Prop | Type | Default |
|---|---|---|
| color Colour of the orb and its glow. | Type: DitherColor | Default "ink" |
| highlight A third, brighter tone for the specular highlight. | Type: DitherColor | Default – |
| background Colour behind the orb. "transparent" floats it over the page. | Type: DitherColor | Default "--dither-paper" |
| size Radius as a share of the box's shorter side, 0.1 to 0.5. | Type: number | Default 0.26 |
| morph How much the outline wobbles. 0 is a perfect sphere. | Type: number | Default 1 |
| lean How far the orb and its light lean towards the pointer. 0 turns it off. | Type: number | Default 1 |
| glow Strength of the dithered glow around the orb, 0 to 1. | Type: number | Default 0.5 |
| matrix Threshold matrix. | 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 outline breathes. | Type: number | Default 1 |
| animate false draws one still frame and stops following the pointer. | Type: boolean | Default true |
Notes
- The orb is decorative and hidden from assistive technology.
- With reduced motion turned on, it draws one still, centred frame and ignores the pointer.
- One WebGL context per orb. It pauses offscreen and in hidden tabs, and the pointer listener is passive and eased in one animation frame loop that stops once the orb settles.