# DitherGradient

Linear, radial, conic or wave gradients through the ordered-dither engine.

## Installation

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

Or copy the source into your project:

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

## Usage

```astro
---
import { DitherGradient } from "astro-dither";
---

<DitherGradient mode="linear" palette={["#000000", "#00b2ff"]} />
```

A typed wrapper over the gradient effect. `mode` picks the ramp and `palette` the colours; everything else is the shared effect API.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"linear" | "radial" | "conic" | "wave"` | "linear" | The ramp shape. |
| `angle` | `number` | 180 | Ramp direction in degrees. |
| `cx` | `number` | 0.5 | Centre x for radial/conic. |
| `cy` | `number` | 0 | Centre y for radial/conic. |
| `radius` | `number` | 1.05 | Radial reach. |
| `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 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.