Write this, get this.
Every effect is one Astro component. This is the whole setup.
---
import { DitherAurora } from "astro-dither";
---
<DitherAurora />---
import { DitherEffect } from "astro-dither";
---
<DitherEffect effect="mesh" />---
import { DitherImage } from "astro-dither";
---
<DitherImage
src="/examples/landscape.jpg"
alt="A dithered landscape"
/>
Nineteen effects, one engine.
Aurora
<DitherAurora />Plasma<DitherEffect effect="plasma" />Waves<DitherEffect effect="waves" />Contours<DitherEffect effect="contours" />Tunnel<DitherEffect effect="tunnel" />Retro grid<DitherEffect effect="retro-grid" />Smoke<DitherEffect effect="smoke" />Starfield<DitherEffect effect="starfield" />Made for Astro pages.
Small, fast and accessible by default.
Page JS66 kB, 21.8 kB gzippedReactnot installedHydrationcustom elements, no framework
No React, small script.
Plain Astro components and one custom element. Nothing to hydrate.
12 surfaces · 1 WebGL context
Many effects, one context.
Every effect on a page shares one WebGL context, so a page can hold dozens.
aria-hiddenReduced motionPauses offscreen
Accessible by default.
Backgrounds stay out of screen readers, hold still for reduced motion and stop drawing when offscreen.
Install
Astro 5 or newer. One dependency: Paper Shaders.
npm i astro-ditherpnpm add astro-ditherbun add astro-dither