KQ-1445 · DRAPE/SILK

Drape Silk

A background of silk filling the box: long hanging folds that meander, fan out as they fall and drift slowly, raked by a soft key light with an anisotropic shine stretched along the threads, so the sheen slides along the folds as they move, and a fine plain weave breaking it where the screen can hold it. The hand lifts the cloth, its place following on springs.glide and its presence on springs.drift; a press takes it up higher and on release it drops on springs.recoil with two small bounces, a ripple runs out from where it fell and the folds shift into a new arrangement on drift. Keyboard focus on a control inside takes the cloth up gently there, and focus leaving lets it fall the same way.

KQ-1445 · DRAPE/SILK

Fieldline Atelier

Silk that remembers the hand

Charmeuse, 19 momme

folds at rest · cobalt silk

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/drape-silk

Props

children: React.ReactNode; default —; The content on the silk: a hero line, a product panel, a call to action.
folds: number; default 5; About how many folds cross the frame, 2 to 10.
sheen: number; default 0.6; How much the silk shines along its folds, 0 (matte) to 1.
color: string; default "var(--accent)"; The silk's dye, any CSS colour.
depth: number; default 0.6; How deep the folds run, 0 (nearly flat) to 1.
weave: number; default 0.35; How plainly the weave shows in the shine, 0 to 1.
lightAngle: number; default 315; Where the key light comes from, degrees clockwise from the top.
speed: number; default 0.5; How fast the folds drift, 0 (still) to 2.
interactive: boolean; default true; The pointer and keyboard focus lift the cloth, and a press lifts and drops it.
pointerStrength: number; default 0.6; How high the hand lifts the cloth, 0 to 1.
radius: number; default 160; How wide the lift under the hand is, px.
paused: boolean; default false; Hold the folds still; the hand still lifts the cloth.
seed: number; default 1; Seeds the folds, so two drapes never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) lifting the cloth.
onLiftChange: (lifted: boolean) => void; default —; Fires when a press or keyboard focus takes the cloth up (true) and when it lets it fall (false).
onSettle: () => void; default —; Fires when a dropped cloth has come to rest in its new folds.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on the silk: a hero line, a product panel, a call to action.
folds	number	5	About how many folds cross the frame, 2 to 10.
sheen	number	0.6	How much the silk shines along its folds, 0 (matte) to 1.
color	string	"var(--accent)"	The silk's dye, any CSS colour.
depth	number	0.6	How deep the folds run, 0 (nearly flat) to 1.
weave	number	0.35	How plainly the weave shows in the shine, 0 to 1.
lightAngle	number	315	Where the key light comes from, degrees clockwise from the top.
speed	number	0.5	How fast the folds drift, 0 (still) to 2.
interactive	boolean	true	The pointer and keyboard focus lift the cloth, and a press lifts and drops it.
pointerStrength	number	0.6	How high the hand lifts the cloth, 0 to 1.
radius	number	160	How wide the lift under the hand is, px.
paused	boolean	false	Hold the folds still; the hand still lifts the cloth.
seed	number	1	Seeds the folds, so two drapes never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) lifting the cloth.
onLiftChange	(lifted: boolean) => void	—	Fires when a press or keyboard focus takes the cloth up (true) and when it lets it fall (false).
onSettle	() => void	—	Fires when a dropped cloth has come to rest in its new folds.
className	string	"h-full w-full"	Sizes and shapes the box.