# Glow

A soft dithered spotlight from any point, breathing slowly.

## Installation

```sh
pnpm add astro-dither
```

Or copy the source into your project:

```sh
npx astro-dither add effect
```

## Usage

```astro
---
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.

```astro
<DitherEffect effect="glow" params={{"cx":0.1,"cy":0.15,"radius":0.9,"power":1.4}} />
```

### Hard spotlight

High `power` tightens the falloff into a stage spotlight.

```astro
<DitherEffect effect="glow" params={{"radius":0.4,"power":5}} />
```

## 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, 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.
* Shares one WebGL context with every other ordered effect on the page.