Gradient | astro-dither docs

Preview

<DitherEffect effect={"gradient"} params={{"mode":1,"angle":180,"cx":0.5,"cy":0,"radius":1.05,"from":1,"to":0}} palette={["#070707","#e11d24"]} cell={2} matrix={8} speed={0} />

Installation

pnpm add astro-dither

npm i astro-dither

bun add astro-dither

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

Usage

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

<DitherEffect effect="gradient" palette={["#000000", "#00b2ff", "#d6efff"]} />

Four modes under one prop: linear sweeps along an angle, radial grows from a point, conic spins around it, and wave strips the screen horizontally. The ramp itself is two stops, from and to, blended through the palette.

The props group like this:

Shape: mode, angle, cx, cy, radius. Ramp: from and to, blended through palette. Motion: speed rotates linear and conic modes.

Examples

Conic spin

mode 2 turns the ramp around its centre, and speed keeps it turning.

<DitherEffect effect={"gradient"} params={{"mode":2,"angle":180,"cx":0.5,"cy":0.5,"radius":1.05,"from":1,"to":0}} palette={["#070707","#e11d24"]} cell={2} matrix={8} speed={0.4} />

Horizontal wave

mode 3 drops the ramp for soft horizontal bands that drift.

<DitherEffect effect={"gradient"} params={{"mode":3,"angle":180,"cx":0.5,"cy":0,"radius":1.05,"from":1,"to":0}} palette={["#070707","#e11d24"]} cell={2} matrix={8} speed={0.6} />

Props

Prop	Type	Default	Description
`mode`	`number`	1	0 linear, 1 radial, 2 conic, 3 wave. 0 to 3.
`angle`	`number`	180	Ramp direction in degrees (linear and conic). 0 to 360.
`cx`	`number`	0.5	Centre x, 0 to 1. 0 to 1.
`cy`	`number`	0	Centre y, 0 to 1. 0 to 1.
`radius`	`number`	1.05	Radial reach. 0.1 to 2.
`from`	`number`	1	Ramp start stop. 0 to 1.
`to`	`number`	0	Ramp end stop. 0 to 1.
`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 and aria-hidden. Put real text on top of it, not inside it.
With reduced motion it draws one still frame at 0s 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.