# DitherGlobe

A spinning, lit globe dithered from a bundled land mask.

## Installation

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

Or copy the source into your project:

```sh
npx astro-dither add globe
```

## Usage

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

<DitherGlobe />
```

The globe effect with the land mask bundled as an asset. It turns on its own; `lat` and `lon` set the starting view, `sea` how much ocean shows, and the palette styles the land.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lat` | `number` | 20 | Latitude facing the viewer. |
| `lon` | `number` | 48 | Longitude facing the viewer when the spin starts. |
| `sea` | `number` | 0.12 | Tone of the sea. 0 leaves it clear. |
| `src` | `string | ImageMetadata` | bundled land mask | Override the mask. |
| `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.