Starfield | astro-dither docs

Preview

pnpm add astro-dither

Or copy the source into your project:

npx astro-dither add effect

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

<DitherEffect effect="starfield" />

Three layers of hashed stars, each drifting at a different speed and twinkling on its own clock. gain scales the overall brightness.

The props group like this:

Brightness: gain.

Low gain thins the field to a few bright stars.

High gain lets the far layers show through too.

Prop	Type	Default	Description
`gain`	`number`	1.2	Overall star brightness. 0.2 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.