Preview
Height
Wave
Grain
Matrix
Cell
Speed
Levels
Still time
Bloom
Bloom radius
Animate
Palette
<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-dithernpm i astro-ditherbun add astro-ditherOr copy the source into your project:
npx astro-dither add effectUsage
---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. Rounded to whole device pixels so cells stay even. |
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. |
stillTime | number | the effect's | The moment drawn when motion is off or reduced, in seconds. |
levels | number | 0 (all) | Tones the field snaps to before dithering. Low values give hard, posterised steps. |
bloom | number | 0 | Bloom around lit cells, 0 to 1. Set a positive prop to create the overlay before overriding it with CSS --dither-bloom. |
bloomRadius | number | 10 | Bloom blur in CSS pixels. CSS --dither-bloom-radius overrides it. |
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.