Preview
<DitherGradient effect={"gradient"} />Installation
pnpm add astro-dithernpm i astro-ditherbun add astro-ditherOr copy the source into your project: npx astro-dither add gradient
Usage
---
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 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.