Moiré Screens
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/silk-drapeSilk 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.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
tone
SilkTone | { base: string; shade: string; sheen: string }
Default
"pearl"Tone in light mode, or a custom
{ base, shade, sheen }(any CSS colors).darkTone
SilkTone | { base: string; shade: string; sheen: string }
Default
"ink"Tone in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
speed
number
Default
1How fast the cloth moves. 0 holds it still.
folds
number
Default
1Fold size: below 1 is tighter, above 1 looser.
interactive
boolean
Default
trueThe pointer lifts the cloth from underneath.
| 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. |
