Installation

Install the package

pnpm add astro-dither

npm i astro-dither

bun add astro-dither

The package needs Astro 5 or newer and has one runtime dependency, @paper-design/shaders.

Use a component

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

<section style="height: 100svh">
  <DitherAurora />
</section>

The component fills its parent, so give the parent a size. That is the whole setup: no client directive, no provider, no config file.

Add more

---
import { DitherEffect, DitherImage } from "astro-dither";
---

<section style="height: 400px">
  <DitherEffect effect="contours" />
</section>
<figure style="height: 400px">
  <DitherImage src="/photo.jpg" alt="A dithered photograph" />
</figure>

Every component also has a per-file export if you prefer that: astro-dither/DitherAurora.astro, astro-dither/DitherImage.astro, and so on. astro-dither/effects exports the effect names and types for building your own registry-driven UI.