Silk | astro-dither docs

Preview

<DitherEffect effect={"silk"} params={{"sharp":3,"warp":5}} palette={["#0a0714","#312a56","#7d6fb8","#e8e3ff"]} cell={2} matrix={8} speed={1} />

pnpm add astro-dither

npm i astro-dither

bun add astro-dither

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

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

<DitherEffect effect="silk" />

A sine sheet warped by noise. warp bends the folds and sharp decides how the crests catch the light, from soft cloth to hard moire.

The props group like this:

Fold: warp. Highlight: sharp.

Low sharp flattens the crests into a gentle sheen.

<DitherEffect effect={"silk"} params={{"sharp":1.5,"warp":3}} palette={["#0a0714","#312a56","#7d6fb8","#e8e3ff"]} cell={2} matrix={8} speed={1} />

High warp pulls the sheet into tight, overlapping ridges.

<DitherEffect effect={"silk"} params={{"sharp":4,"warp":8}} palette={["#0a0714","#312a56","#7d6fb8","#e8e3ff"]} cell={2} matrix={8} speed={1} />

Prop	Type	Default	Description
`sharp`	`number`	3	Crest highlight sharpness. 1 to 8.
`warp`	`number`	5	Fold bending. 0 to 10.
`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.