Preview
Mode
Angle
Cx
Cy
Radius
From
To
Matrix
Cell
Speed
Levels
Still time
Bloom
Bloom radius
Animate
Palette
<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-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="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. 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 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.