Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/beams.jsonUsage
import { Beams } from "@/components/dithercn/beams";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<Beams className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}Light comes from origin and spreads in a cone around angle. The rays are noise around the origin, so they widen with distance like real shafts of light, and dust drifting through them breaks them up along their length. The whole cone sways back and forth by sweep degrees over about a minute.
Examples
From the top edge
An origin far above the box gives nearly parallel rays, like light through a high window. Brightness fades from where the light enters the box, not from the far origin.
Spotlight over a headline
A narrow cone from just above the centre, through a four-colour palette, with a short reach so the text at the bottom sits in the dark.
Props
| Prop | Type | Default |
|---|---|---|
| origin Where the light comes from, as fractions of the box from the top left. Values outside 0 to 1 put it out of frame. | Type: [x: number, y: number] | Default [0.18, -0.12] |
| angle Direction the light points, in degrees as in CSS: 180 is straight down. | Type: number | Default 160 |
| spread Width of the cone in degrees. | Type: number | Default 80 |
| rays Roughly how many separate rays. | Type: number | Default 9 |
| sweep How far the cone sways each way, in degrees. 0 holds it still. | Type: number | Default 6 |
| reach How far the light reaches from where it enters the box, as a share of the box diagonal. | 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", "--dither-ink"] |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| levels Tones before dithering. | 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 rays drift and sway. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The light fills this box. | Type: string | Default – |
Notes
- The light 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 soft CSS cone.