# Silk Drape

> WebGL satin filling a section: slow folds and creases catch an anisotropic sheen that runs across the weave, and the pointer lifts the cloth from underneath. Pearl in light mode, ink in dark, with six tones or your own colors. Pauses off-screen and holds a still frame for reduced motion.

- Slug: `silk-drape`
- Category: [Backgrounds](https://www.assembli.design/category/backgrounds.md)
- Type: block
- Tags: webgl, shader, silk, fabric, luxury, pointer
- npm dependencies: motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/silk-drape
- Page: https://www.assembli.design/components/silk-drape

![Silk Drape preview](https://www.assembli.design/thumbnails/silk-drape-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `SilkTone \| { base: string; shade: string; sheen: string }` | `"pearl"` | Tone in light mode, or a custom `{ base, shade, sheen }` (any CSS colors). |
| `darkTone` | `SilkTone \| { base: string; shade: string; sheen: string }` | `"ink"` | Tone in dark mode. |
| `mode` | `"auto" \| "light" \| "dark"` | `"auto"` | Follow the page theme, or force one. |
| `speed` | `number` | `1` | How fast the cloth moves. 0 holds it still. |
| `folds` | `number` | `1` | Fold size: below 1 is tighter, above 1 looser. |
| `interactive` | `boolean` | `true` | The pointer lifts the cloth from underneath. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/silk-drape/silk-drape.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/silk-drape
```

Registry item JSON: https://www.assembli.design/r/silk-drape.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.