Silk
Flowing folds of satin catching the light as they drift.
canvasambient
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Weave
Fold size1
Warp1
Detail8px
Smaller = smoother surface, heavier.
Motion
Speed1
Appearance
Color 1
Color 2
Sheen0.6
Props
| Prop | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ['139,92,246','34,211,238'] | The two silk colors, blended across the folds, as r,g,b. |
scale | number | 1 | Fold size — higher spreads the weave wider. |
speed | number | 1 | Flow speed multiplier (0 = frozen). |
sheen | number | 0.6 | Sheen sharpness — tighter, brighter highlights (0–1). |
warp | number | 1 | How much the weave warps and ripples (0–2). |
detail | number | 8 | Shading cell size in px (smaller = smoother, heavier). |
children | ReactNode | — | Content layered above the canvas. |
className | string | — | Extra classes for the wrapper. |