Preview
<DitherEffect effect={"glow"} params={{"cx":0.5,"cy":0.55,"radius":0.6,"power":2}} palette={["#040208","#2a0f4a","#8f2f8f","#ffc4a3"]} cell={2} matrix={8} speed={1} />Palette
Matrix
Installation
pnpm add astro-dithernpm i astro-ditherbun add astro-ditherOr copy the source into your project: npx astro-dither add effect
Usage
---
import { DitherEffect } from "astro-dither";
---
<DitherEffect effect="glow" params={{ cx: 0.5, cy: 0.4, radius: 0.7 }} />A single radial falloff from cx, cy. radius sets how far it reaches and power how sharply it drops. The field adds a slow breath on top, so the edge pulses a little even at full brightness.
The props group like this:
Placement: cx, cy. Falloff: radius, power.
Examples
Corner light
Push the centre to a corner and stretch the radius for a side-lit wall.
<DitherEffect effect={"glow"} params={{"cx":0.1,"cy":0.15,"radius":0.9,"power":1.4}} palette={["#040208","#2a0f4a","#8f2f8f","#ffc4a3"]} cell={2} matrix={8} speed={1} />Hard spotlight
High power tightens the falloff into a stage spotlight.
<DitherEffect effect={"glow"} params={{"cx":0.5,"cy":0.55,"radius":0.4,"power":5}} palette={["#040208","#2a0f4a","#8f2f8f","#ffc4a3"]} cell={2} matrix={8} speed={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cx | number | 0.5 | Centre x, 0 to 1. 0 to 1. |
cy | number | 0.55 | Centre y, 0 to 1. 0 to 1. |
radius | number | 0.6 | How far the light reaches. 0.05 to 1.5. |
power | number | 2 | Falloff sharpness. 0.5 to 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 2s 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.