# Silk

Folds of silk catching the light: smooth sheets that ripple and shift, with a bright highlight along each crest.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The dithercn agent skill, for building any dither on the engine, is at [/.well-known/agent-skills/dithercn/SKILL.md](/.well-known/agent-skills/dithercn/SKILL.md).

> **This is an example, not the only option.** It is one component built on the dithercn engine. Install it when it is what you were asked for. For any other look, don't stretch its props to fit: write your own field on `DitherShader` ([Write your own dither](/docs/engine/write-your-own.md)), and read this example's source for technique. Its full source is in [https://dithercn.dev/r/silk.json](https://dithercn.dev/r/silk.json), under `files[].content`.

## Installation [#installation]

```bash
npx shadcn@latest add https://dithercn.dev/r/silk.json
```

## Usage [#usage]

```tsx
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 [#examples]

### Behind a headline [#behind-a-headline]

Fewer `folds`, a sharper `sheen` and an `intensity` of 0.45 keep the brightest crest below full ink.

```tsx title="examples/silk-headline.tsx"
import { Silk } from "@/components/dithercn/silk";

export default function SilkHeadline() {
  return (
    <section className="relative isolate flex size-full flex-col items-center justify-center gap-3 px-6 text-center">
      <Silk
        angle={80}
        folds={4}
        sheen={0.8}
        intensity={0.45}
        speed={0.7}
        className="absolute inset-0 -z-10"
      />
      <h3 className="max-w-md text-3xl font-medium tracking-[-0.03em] text-balance">
        The autumn collection
      </h3>
      <p className="text-muted-foreground max-w-sm text-sm text-pretty">
        A lower intensity keeps the brightest crest below full ink, so the text
        reads on top.
      </p>
    </section>
  );
}
```

### Champagne [#champagne]

Eight folds on a diagonal through four warm golds, from near-black to a pale cream highlight.

```tsx title="examples/silk-champagne.tsx"
import { Silk } from "@/components/dithercn/silk";

export default function SilkChampagne() {
  return (
    <Silk
      angle={135}
      folds={8}
      sheen={0.9}
      palette={[
        "oklch(0.2 0.02 60)",
        "oklch(0.42 0.06 65)",
        "oklch(0.68 0.09 75)",
        "oklch(0.93 0.05 90)",
      ]}
      className="absolute inset-0"
    />
  );
}
```

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `folds` | `number` | `6` | How many folds cross the box. |
| `angle` | `number` | `110` | Direction the folds run, in degrees as in CSS: 90 runs them left to right. |
| `sheen` | `number` | `0.6` | How narrow and bright the highlight on each fold is, from 0 to 1. |
| `intensity` | `number` | `1` | The brightest tone, from 0 to 1. Lower it to put text on top. |
| `palette` | `[DitherColor, DitherColor, ...DitherColor[]]` | `Paper, two tints of --dither-ink, then --dither-ink` | Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. |
| `matrix` | `"bayer2" \| "bayer4" \| "bayer8" \| "blue-noise"` | `"bayer8"` | The threshold pattern. See Dither engine. |
| `cell` | `number` | `--dither-cell` | Size of one dither cell in CSS pixels. |
| `speed` | `number` | `1` | How fast the folds move. |
| `animate` | `boolean` | `true` | false stops the motion: a still frame if it starts off, the current frame if it was moving. |
| `className` | `string` | `–` | Size and position. The cloth fills this box. |

## Notes [#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.