# Rise

A vertical ramp whose top edge waves and drifts, dark above to bright below.

## 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="rise" cell={4} palette={["#000000", "#00b2ff", "#d6efff"]} />
```

A colour field that rises from the bottom of the surface. `height` sets where the edge sits, `wave` gives it a slow sine sway, and `grain` roughens it with fractal noise. Above the edge the tone drops to the first palette colour; below it the ramp reaches the brightest stops, with specks of noise near full brightness. Made for footers and section backgrounds.

The props group like this:

Shape: `height`, `wave`, `grain`. Look: `palette` runs dark to bright, top to bottom. Motion: `speed` drifts the edge.

## Examples

### Footer band

Chunky cells in navy to blue under a big wordmark.

```astro
<DitherEffect effect="rise" params={{"height":0.72,"wave":0.05,"grain":0.3}} cell={4} />
```

### Tide line

A low edge with a stronger wave and heavy grain.

```astro
<DitherEffect effect="rise" params={{"height":0.45,"wave":0.14,"grain":0.55}} palette={["#020608","#0d3a23","#1f7a4a","#5fd4a0","#d9ffd0"]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `height` | `number` | 0.72 | Where the edge sits, 0 to 1. Higher means more of the surface is bright. 0 to 1. |
| `wave` | `number` | 0.05 | How far the edge sways in a slow sine. 0 to 0.2. |
| `grain` | `number` | 0.3 | How much fractal noise roughens the edge. 0 to 0.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. 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, not inside it.
* With reduced motion it draws one still frame (at 3s) 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.