Contours | astro-dither docs

Preview

Installation

pnpm add astro-dither

Or copy the source into your project:

npx astro-dither add effect

Usage

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

<DitherEffect effect="contours" />

Fractal height sliced into contour bands, with the hillshade kept under the lines. scale zooms the terrain and lines sets how many elevation bands the map draws.

The props group like this:

Terrain: scale, lines.

Examples

Flat land

Few lines read like a calm, low-relief map.

Alps

More lines at a bigger scale give dense alpine ridges.

Props

Prop	Type	Default	Description
`scale`	`number`	2	Terrain zoom. 0.5 to 6.
`lines`	`number`	10	Contour bands drawn. 2 to 30.
`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 5s 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.