Edge network
- Regions
- 38
- Median latency
- 41 ms
Animated ditherfor Astro
Backgrounds, gradients and image effects.
Plain Astro components. No React.
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" />Use it in real UI.
Cards, players and buttons built from the same components.
Made for Astro pages.
Small, fast and accessible by default.
Six components, one engine.
Everything below is a plain Astro component. Each one has a full props table in the docs.
DitherPaper's animated dither shapes: sphere, warp, wave, ripple, swirl and dots.DitherImageOrdered dithering over any photograph, keeping the img and its alt.DitherGradientLinear, radial, conic or wave gradients through the ordered-dither engine.DitherAuroraCurtains of light that fold, sway and shimmer, with every knob typed.DitherEffectThe 18 procedural registry effects through one component.DitherGlobeA spinning, lit globe dithered from a bundled land mask.
Does it need React?
No. Every component is a plain Astro component backed by a browser custom element: its settings are serialised into a data attribute at build time and a small element script mounts it. There are no client directives and no hydration framework.
Which browsers does it support?
Anything with WebGL2. Without it, ordered surfaces show a static palette gradient, Dither shows a gradient between its colours, and DitherImage keeps the full-size plain image. The same fallbacks apply if a WebGL context is lost.
What about accessibility and reduced motion?
Background surfaces render aria-hidden, so real text goes on top, never inside. With prefers-reduced-motion they draw one still frame and stop, and they pause when scrolled out of view or when the tab is hidden. DitherImage leaves the img and its alt in the DOM, so screen readers and no-JavaScript visitors get the photo.
Is it fast?
Every ordered-dither surface on a page shares one WebGL2 context and one compiled program per effect, so a page can hold dozens. The frame loop runs only while a surface is visible and animating. Dither and DitherImage use a context each, so keep those to a few per page.
Can I copy the code instead of a dependency?
Yes. npx astro-dither add aurora writes the component, the engine files it imports and any assets into your repo. The CLI follows imports recursively and never runs installs.
How is it licensed?
MIT. The shapes and image filter run on Paper Shaders; the registry effects run on the project's own engine.