Preview
Cx
Cy
Fade
Matrix
Cell
Speed
Levels
Still time
Bloom
Bloom radius
Animate
Palette
<DitherEffect effect="beams" params={{"cx":0.5,"cy":1.15,"fade":1.6}} palette={["#000000","#0d2138","#2a6ba0","#bfe3ff"]} 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="beams" />Noise-streaked rays fan out from cx, cy. fade controls how quickly they die out, so high values give short candlelight rays and low values let the beams cross the whole surface.
The props group like this:
Placement: cx, cy. Falloff: fade.
Examples
Edge light
A centre above the box makes rays drop like stage lights.
<DitherEffect effect="beams" params={{"cx":0.5,"cy":-0.2,"fade":0.8}} palette={["#000000","#0d2138","#2a6ba0","#bfe3ff"]} cell={2} matrix={8} speed={1} />Short shimmer
High fade pins the light close to its source.
<DitherEffect effect="beams" params={{"cx":0.5,"cy":0.5,"fade":4}} palette={["#000000","#0d2138","#2a6ba0","#bfe3ff"]} cell={2} matrix={8} speed={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cx | number | 0.5 | Source x, 0 to 1. 0 to 1. |
cy | number | 1.15 | Source y, can sit off the surface. 0 to 2. |
fade | number | 1.6 | How quickly the rays die out. 0.2 to 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. 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 4s 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.