Aurora | astro-dither docs

Preview

<DitherEffect effect="aurora" params={{"curtains":3,"height":0.42,"spread":0.11,"sway":1,"turbulence":0.6,"rays":8,"length":0.45,"glow":0.9,"intensity":0.95,"shimmer":0.2,"scale":1,"tilt":0,"drift":0,"direction":1,"mask":0}} palette={["#02060d","#061a33","#0b4f99","#1f8fff","#d6efff"]} cell={2} matrix={8} speed={1} />

Installation

pnpm add astro-dither

Or copy the source into your project:

npx astro-dither add effect

Usage

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

<DitherAurora />

Each curtain has a bright lower edge that folds slowly, with rays that fade as they rise. Further curtains hang higher and dimmer. height sets where the lowest edge hangs, so you can keep the area under it clear for text.

The props group like this:

Shape: curtains, height, spread, sway, turbulence, rays, length. Light: glow, intensity, shimmer. Placement and motion: tilt, scale, drift, direction, mask, plus speed, cell and matrix.

Examples

Above a headline

Raising height lifts the curtains so the lower third stays clear.

<DitherEffect effect="aurora" params={{"curtains":3,"height":0.62,"spread":0.11,"sway":1,"turbulence":0.6,"rays":8,"length":0.45,"glow":0.9,"intensity":0.95,"shimmer":0.2,"scale":1,"tilt":0,"drift":0,"direction":1,"mask":0}} palette={["#02060d","#061a33","#0b4f99","#1f8fff","#d6efff"]} cell={2} matrix={8} speed={1} />

Northern lights

A green-to-violet palette with more curtains and longer rays.

<DitherEffect effect="aurora" params={{"curtains":5,"height":0.42,"spread":0.11,"sway":1,"turbulence":0.6,"rays":12,"length":0.7,"glow":0.9,"intensity":0.95,"shimmer":0.2,"scale":1,"tilt":-6,"drift":0.4,"direction":1,"mask":0}} palette={["#010604","#04291a","#0f7a3a","#4ade80","#c4b5fd"]} cell={2} matrix={8} speed={1} />

Hanging down

direction -1 flips it so rays fall from a bright top edge.

<DitherEffect effect="aurora" params={{"curtains":2,"height":0.14,"spread":0.11,"sway":1,"turbulence":0.6,"rays":5,"length":0.4,"glow":0.9,"intensity":0.95,"shimmer":0.2,"scale":1,"tilt":0,"drift":0,"direction":-1,"mask":0}} palette={["#02060d","#061a33","#0b4f99","#1f8fff","#d6efff"]} cell={2} matrix={8} speed={1} />

Props

Prop	Type	Default	Description
`curtains`	`number`	3	How many curtains. Each hangs higher and dimmer. 1 to 6.
`height`	`number`	0.42	Where the lowest bright edge hangs, 0 to 1. 0 to 0.9.
`spread`	`number`	0.11	Vertical gap between curtains. 0 to 0.3.
`sway`	`number`	1	How far the edges fold. 0 to 3.
`turbulence`	`number`	0.6	Fine ripples along each edge. 0 to 2.
`rays`	`number`	8	How many rays fit across. 2 to 20.
`length`	`number`	0.45	How far the rays reach up. 0 to 1.
`glow`	`number`	0.9	Brightness of the line along each edge. 0 to 2.
`intensity`	`number`	0.95	Overall curtain brightness. 0 to 1.
`shimmer`	`number`	0.2	A slow brightness ripple. 0 to 1.
`scale`	`number`	1	Horizontal zoom. 0.2 to 3.
`tilt`	`number`	0	Tilt of the curtains in degrees. -45 to 45.
`drift`	`number`	0	Sideways travel. -2 to 2.
`direction`	`number`	1	up rises from a bright lower edge; down hangs the rays from a bright top edge (1 or -1 in params). -1 to 1.
`mask`	`number`	0	Fades it out where your text sits: none, top, bottom or edges (0 to 3 in params). 0 to 3.
`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. Rounded to whole device pixels so cells stay even.
`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.
`stillTime`	`number`	the effect's	The moment drawn when motion is off or reduced, in seconds.
`levels`	`number`	0 (all)	Tones the field snaps to before dithering. Low values give hard, posterised steps.
`bloom`	`number`	0	Bloom around lit cells, 0 to 1. Set a positive prop to create the overlay before overriding it with CSS `--dither-bloom`.
`bloomRadius`	`number`	10	Bloom blur in CSS pixels. CSS `--dither-bloom-radius` overrides it.
`class`	`string`	undefined	Classes on the surface element, for size and position.

Notes

Decorative and aria-hidden. Put real text on top of it, not inside it.
With reduced motion it draws one still frame at 6s and stops.
It pauses when scrolled out of view or when the tab is hidden.
It shares one WebGL context with every other ordered effect on the page.