Aurora | astro-dither docs

Preview

<DitherEffect effect={"aurora"} params={{"curtains":3,"height":0.42,"spread":0.05,"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

npm i astro-dither

bun 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.05,"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.05,"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.05,"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.05	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	1 rises, -1 hangs the rays from a bright top edge. -1 to 1.
`mask`	`number`	0	0 none, 1 fades the top, 2 fades the bottom, 3 fades the sides. 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, 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.

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.