Dither | astro-dither docs

Preview

<Dither shape={"sphere"} size={2} speed={0.4} colorBack={"#000000"} colorFront={"#00b2ff"} />

Installation

pnpm add astro-dither

npm i astro-dither

bun add astro-dither

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

Usage

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

<Dither shape="sphere" size={2} speed={0.4} />

The original Paper dithering shader, driving six shape families. It runs in its own WebGL context per element and takes colour, pattern and motion props straight from the Paper API.

Props

Prop	Type	Default	Description
`shape`	`"sphere" \| "warp" \| "wave" \| "ripple" \| "swirl" \| "dots"`	"sphere"	The Paper dithering shape.
`type`	`"random" \| "2x2" \| "4x4" \| "8x8"`	"4x4"	The threshold pattern.
`size`	`number`	2	Pattern scale.
`speed`	`number`	0.4	Animation speed.
`scale`	`number`	1	Overall zoom.
`colorBack`	`string`	"#000000"	Paper colour.
`colorFront`	`string`	"#00b2ff"	Ink colour.
`colorHighlight`	`string`	colorFront	Bright edge colour.
`pxSize`	`number`	2	Dither cell size in pixels.
`class`	`string`	undefined	Classes on the element.

Notes

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.