DitherAurora | astro-dither docs

Preview

<DitherAurora effect={"aurora"} />

pnpm add astro-dither

npm i astro-dither

bun add astro-dither

Or copy the source into your project: npx astro-dither add aurora

---
import { DitherAurora } from "astro-dither";
---

<DitherAurora />

The signature look: folding curtains of light. This wrapper gives you the aurora's full param set as typed props instead of a params object.

Prop	Type	Default	Description
`curtains`	`number`	3	How many curtains. Each hangs higher and dimmer.
`height`	`number`	0.42	Where the lowest bright edge hangs, 0 to 1.
`spread`	`number`	0.05	Vertical gap between curtains.
`sway`	`number`	1	How far the edges fold.
`turbulence`	`number`	0.6	Fine ripples along each edge.
`rays`	`number`	8	How many rays fit across.
`length`	`number`	0.45	How far the rays reach up.
`glow`	`number`	0.9	Brightness of the line along each edge.
`intensity`	`number`	0.95	Overall curtain brightness.
`shimmer`	`number`	0.2	A slow brightness ripple.
`scale`	`number`	1	Horizontal zoom.
`tilt`	`number`	0	Tilt in degrees.
`drift`	`number`	0	Sideways travel.
`direction`	`1 \| -1`	1	-1 hangs the rays from a bright top edge.
`mask`	`number`	0	0 none, 1 fades top, 2 fades bottom, 3 fades sides.
`palette`	`string[]`	the effect's	2 to 8 colours, paper first, brightest last. `transparent` works.
`cell`	`number`	2	Size of one dither cell in CSS pixels, 1 to 8.
`matrix`	`2 \| 4 \| 8 \| "noise"`	8	The Bayer threshold size, or noise for a random look.
`speed`	`number`	1	Playback speed. 0 draws one still frame.
`class`	`string`	undefined	Classes on the surface element, for size and position.

Decorative surfaces render aria-hidden. Put real text on top, not inside them.
With reduced motion it draws one still frame and stops.
It pauses when scrolled out of view or when the tab is hidden.