Beams | astro-dither docs

Preview

<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-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="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, 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 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.