Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/silk.jsonUsage
import { Silk } from "@/components/dithercn/silk";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<Silk className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}The cloth is a height field of folds bent by slow waves. It is lit from the top left: faces turned to the light are bright, the far sides of each fold fall smoothly into shadow, and a narrow highlight runs along every crest. The folds slide and change width over time. It defaults to the 8×8 matrix, which suits its long soft gradients.
Examples
Behind a headline
Fewer folds, a sharper sheen and an intensity of 0.45 keep the brightest crest below full ink.
Champagne
Eight folds on a diagonal through four warm golds, from near-black to a pale cream highlight.
Props
| Prop | Type | Default |
|---|---|---|
| folds How many folds cross the box. | Type: number | Default 6 |
| angle Direction the folds run, in degrees as in CSS: 90 runs them left to right. | Type: number | Default 110 |
| sheen How narrow and bright the highlight on each fold is, from 0 to 1. | Type: number | Default 0.6 |
| intensity The brightest tone, from 0 to 1. Lower it to put text on top. | Type: number | Default 1 |
| palette Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default Paper, two tints of --dither-ink, then --dither-ink |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer8" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast the folds move. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The cloth fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- With reduced motion turned on, it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows soft diagonal stripes in CSS.