Mesh gradient | astro-dither docs

Preview

<DitherEffect effect={"mesh"} params={{"size":0.42,"sway":0.15}} palette={["#0a0018","#3b0ca3","#0ea5c9","#7ddb52","#f7e38b"]} cell={2} matrix={8} speed={1} />

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="mesh" />

Four blobs weighted across the palette range wander slowly. size sets each blob's reach and sway how far they roam, so small values freeze the mesh and large ones smear it.

The props group like this:

Shape: size, sway. Colour: palette, blob by blob.

Examples

Wide melt

Large size and sway blend the palette into one soft wash.

<DitherEffect effect={"mesh"} params={{"size":0.8,"sway":0.35}} palette={["#0a0018","#3b0ca3","#0ea5c9","#7ddb52","#f7e38b"]} cell={2} matrix={8} speed={1} />

Confetti

Small size keeps each blob distinct over the paper colour.

<DitherEffect effect={"mesh"} params={{"size":0.18,"sway":0.2}} palette={["#0a0018","#3b0ca3","#0ea5c9","#7ddb52","#f7e38b"]} cell={2} matrix={8} speed={1} />

Props

Prop	Type	Default	Description
`size`	`number`	0.42	Each blob's radius. 0.1 to 1.
`sway`	`number`	0.15	How far the blobs wander. 0 to 0.5.
`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 3s 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.