Rise | astro-dither docs

Preview

<DitherEffect effect={"rise"} params={{"height":0.72,"wave":0.05,"grain":0.3}} palette={["#000000","#061a33","#0b4f99","#00b2ff","#d6efff"]} 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="rise" cell={4} palette={["#000000", "#00b2ff", "#d6efff"]} />

A colour field that rises from the bottom of the surface. height sets where the edge sits, wave gives it a slow sine sway, and grain roughens it with fractal noise. Above the edge the tone drops to the first palette colour; below it the ramp reaches the brightest stops, with specks of noise near full brightness. Made for footers and section backgrounds.

The props group like this:

Shape: height, wave, grain. Look: palette runs dark to bright, top to bottom. Motion: speed drifts the edge.

Examples

Footer band

Chunky cells in navy to blue under a big wordmark.

<DitherEffect effect={"rise"} params={{"height":0.72,"wave":0.05,"grain":0.3}} palette={["#000000","#061a33","#0b4f99","#00b2ff","#d6efff"]} cell={4} matrix={8} speed={1} />

Tide line

A low edge with a stronger wave and heavy grain.

<DitherEffect effect={"rise"} params={{"height":0.45,"wave":0.14,"grain":0.55}} palette={["#020608","#0d3a23","#1f7a4a","#5fd4a0","#d9ffd0"]} cell={2} matrix={8} speed={1} />

Props

Prop	Type	Default	Description
`height`	`number`	0.72	Where the edge sits, 0 to 1. Higher means more of the surface is bright. 0 to 1.
`wave`	`number`	0.05	How far the edge sways in a slow sine. 0 to 0.2.
`grain`	`number`	0.3	How much fractal noise roughens the edge. 0 to 0.6.
`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.