# Aurora

Curtains of light that fold, sway and shimmer.

## Installation

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

Or copy the source into your project:

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

## Usage

```astro
---
import { DitherAurora } from "astro-dither";
---

<DitherAurora />
```

Each curtain has a bright lower edge that folds slowly, with rays that fade as they rise. Further curtains hang higher and dimmer. `height` sets where the lowest edge hangs, so you can keep the area under it clear for text.

The props group like this:

Shape: `curtains`, `height`, `spread`, `sway`, `turbulence`, `rays`, `length`. Light: `glow`, `intensity`, `shimmer`. Placement and motion: `tilt`, `scale`, `drift`, `direction`, `mask`, plus `speed`, `cell` and `matrix`.

## Examples

### Above a headline

Raising `height` lifts the curtains so the lower third stays clear.

```astro
<DitherEffect effect="aurora" params={{"height":0.62}} />
```

### Northern lights

A green-to-violet palette with more curtains and longer rays.

```astro
<DitherEffect effect="aurora" params={{"curtains":5,"rays":12,"length":0.7,"tilt":-6,"drift":0.4}} palette={["#010604","#04291a","#0f7a3a","#4ade80","#c4b5fd"]} />
```

### Hanging down

`direction` -1 flips it so rays fall from a bright top edge.

```astro
<DitherEffect effect="aurora" params={{"direction":-1,"height":0.14,"curtains":2,"rays":5,"length":0.4}} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `curtains` | `number` | 3 | How many curtains. Each hangs higher and dimmer. 1 to 6. |
| `height` | `number` | 0.42 | Where the lowest bright edge hangs, 0 to 1. 0 to 0.9. |
| `spread` | `number` | 0.05 | Vertical gap between curtains. 0 to 0.3. |
| `sway` | `number` | 1 | How far the edges fold. 0 to 3. |
| `turbulence` | `number` | 0.6 | Fine ripples along each edge. 0 to 2. |
| `rays` | `number` | 8 | How many rays fit across. 2 to 20. |
| `length` | `number` | 0.45 | How far the rays reach up. 0 to 1. |
| `glow` | `number` | 0.9 | Brightness of the line along each edge. 0 to 2. |
| `intensity` | `number` | 0.95 | Overall curtain brightness. 0 to 1. |
| `shimmer` | `number` | 0.2 | A slow brightness ripple. 0 to 1. |
| `scale` | `number` | 1 | Horizontal zoom. 0.2 to 3. |
| `tilt` | `number` | 0 | Tilt of the curtains in degrees. -45 to 45. |
| `drift` | `number` | 0 | Sideways travel. -2 to 2. |
| `direction` | `number` | 1 | 1 rises, -1 hangs the rays from a bright top edge. -1 to 1. |
| `mask` | `number` | 0 | 0 none, 1 fades the top, 2 fades the bottom, 3 fades the sides. 0 to 3. |
| `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 6s) 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.