DitherGlobe | astro-dither docs

Preview

<DitherGlobe effect={"globe"} src={"/_astro/land.DQQLgLH3.png"} palette={["transparent","#f4f1ea"]} />

pnpm add astro-dither

npm i astro-dither

bun add astro-dither

Or copy the source into your project: npx astro-dither add globe

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

<DitherGlobe />

The globe effect with the land mask bundled as an asset. lat and lon rotate the view; the palette styles the land.

Prop	Type	Default	Description
`lat`	`number`	20	Latitude facing the viewer.
`lon`	`number`	48	Longitude facing the viewer.
`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, 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.

Decorative surfaces render 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.