# Dither

Paper's animated dither shapes: sphere, warp, wave, ripple, swirl and dots.

## Installation

```sh
pnpm add astro-dither
```

Or copy the source into your project:

```sh
npx astro-dither add dither
```

## Usage

```astro
---
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 are `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.