# DitherAurora

Curtains of light that fold, sway and shimmer, with every knob typed.

## Installation

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

Or copy the source into your project:

```sh
npx astro-dither add aurora
```

## Usage

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

<DitherAurora color="#4ade80" tipColor="#c4b5fd" bloom={0.6} />
```

The signature look: folding curtains of light. Shape it with `curtains`, `height`, `spread`, `sway`, `turbulence`, `rays` and `length`; light it with `color`, `tipColor`, `background`, `glow`, `intensity` and `shimmer`; place it with `scale`, `tilt`, `drift`, `direction` and `mask`. `cell`, `matrix`, `levels` and `bloom` set how it is drawn.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | "#1f8fff" | The bright lower edge of each curtain. Hex. |
| `tipColor` | `string` | color | The faint tops of the rays. Set a second colour for a two-tone sky. |
| `background` | `string` | "#02060d" | The sky behind. `transparent` shows the page. |
| `curtains` | `number` | 3 | How many curtains. Each hangs higher and dimmer. |
| `height` | `number` | 0.42 | Where the lowest bright edge hangs, 0 to 1. |
| `spread` | `number` | 0.11 | Vertical gap between curtains. |
| `sway` | `number` | 1 | How far the edges fold. |
| `turbulence` | `number` | 0.6 | Fine ripples along each edge. |
| `rays` | `number` | 8 | How many rays fit across. |
| `length` | `number` | 0.45 | How far the rays reach up. |
| `glow` | `number` | 0.9 | Brightness of the line along each edge. |
| `intensity` | `number` | 0.95 | Overall curtain brightness. |
| `shimmer` | `number` | 0.2 | A slow brightness ripple. |
| `scale` | `number` | 1 | Horizontal zoom. |
| `tilt` | `number` | 0 | Tilt in degrees. |
| `drift` | `number` | 0 | Sideways travel. |
| `direction` | `"up" | "down"` | "up" | `down` hangs the rays from a bright top edge. |
| `mask` | `"none" | "top" | "bottom" | "edges"` | "none" | Fades it out where your text sits. |
| `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 surfaces are `aria-hidden`. Put real text on top, not inside them.
* With reduced motion it draws one still frame and stops.
* It pauses when scrolled out of view or when the tab is hidden.