# Globe

An orthographic globe dithered from a land mask.

## Installation

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

Or copy the source into your project:

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

## Usage

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

<DitherGlobe />
```

The bundled land mask sampled onto a sphere. `lat` and `lon` set which point faces the viewer. It ships a two-colour palette that reads as paper land on a transparent sea.

The props group like this:

Placement: `lat`, `lon`.

## Examples

### Pacific

Rotate the view to centre the ocean.

```astro
<DitherEffect effect="globe" params={{"lat":0,"lon":-140}} />
```

### Brand blue

Swap the palette for inked land on transparent water.

```astro
<DitherEffect effect="globe" palette={["transparent","#00b2ff","#d6efff"]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lat` | `number` | 20 | Latitude facing the viewer, degrees. -90 to 90. |
| `lon` | `number` | 48 | Longitude facing the viewer, degrees. -180 to 180. |
| `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 0s) 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.