KQ-1390 · CLOTH/GRID

Cloth Grid

A rectangle of printed fabric that is a real Verlet cloth: pressed and pulled, the fabric under the fingers follows 1:1 and rises toward you with the snap spring's one overshoot, tenting up with radial folds and bunching ahead of the pull, lit from its own normals with a soft cast shadow. Let go and the release velocity carries on while every particle springs back to rest on a spring whose damping runs from the drift spring's ζ 1 down by ripple, so the cloth lies flat again through a few soft ripples; hung from a rod it sways from a passing pointer, pinned at two corners it falls into a drape. Focus shows a handle that moves on the glide spring: Arrow keys take hold and pull it, Enter or Space lets go (or plucks the cloth), Escape lets go.

KQ-1390 · CLOTH/GRID

Fernworks · linen, woven slow

resting · grab the cloth anywhere or tab in

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/cloth-grid

Props

src: string; default —; An image the cloth carries; it must be readable across origins (CORS). The woven print is used without it or when it fails to load.
pattern: "check" | "ticking" | "towel" | "plain"; default "towel"; The woven print drawn when there is no image.
colors: readonly [string, string, string]; default linen, indigo, madder pigments; The print's ground, thread and accent colours, as CSS colours; the defaults are pigments that read the same in both themes.
caption: string; default —; Words woven into the print; they are part of the accessible name too.
label: string; default "Fabric"; The cloth's accessible name.
stiffness: number; default 0.55; Silk (0) to canvas (1): how many folds form, how far the weave stretches and how firmly it returns.
resolution: number; default 28; Cells across the cloth's long side, 8 to 48: coarse cloth folds in facets, fine cloth in curves.
pin: "sheet" | "banner" | "corners"; default "sheet"; How the cloth is held: lying flat, hanging from a rod, or pinned at its two top corners.
lift: number; default 0.5; How far a pinch raises the fabric toward you, 0 to 1.
grip: number; default 0.35; How much fabric a pinch takes, 0 (a single point) to 1 (a handful).
ripple: number; default 0.5; How many soft ripples the cloth leaves as it returns, 0 to 1.
gravity: number; default 0.5; The cloth's weight when it hangs (banner and corners), 0 to 1.
wind: number; default 0.5; How much a passing pointer pushes the cloth, 0 to 1.
sheen: number; default 0.35; The highlight along ridges, 0 (cotton) to 1 (silk).
shadow: boolean; default true; Lifted cloth casts a soft shadow.
dpr: number; default 2; The highest device pixel ratio drawn, capped at 2.
paused: boolean; default false; Freeze the cloth where it is.
interactive: boolean; default true; The pointer and the keyboard move the cloth; false leaves it still and out of the tab order.
onGrabChange: (grabbing: boolean) => void; default —; Fires when the cloth is taken hold of (true) and let go (false), by pointer or keys.
className: string; default "aspect-[2/1] w-full"; Size the box here.

Prop	Type	Default	Description
src	string	—	An image the cloth carries; it must be readable across origins (CORS). The woven print is used without it or when it fails to load.
pattern	"check" \| "ticking" \| "towel" \| "plain"	"towel"	The woven print drawn when there is no image.
colors	readonly [string, string, string]	linen, indigo, madder pigments	The print's ground, thread and accent colours, as CSS colours; the defaults are pigments that read the same in both themes.
caption	string	—	Words woven into the print; they are part of the accessible name too.
label	string	"Fabric"	The cloth's accessible name.
stiffness	number	0.55	Silk (0) to canvas (1): how many folds form, how far the weave stretches and how firmly it returns.
resolution	number	28	Cells across the cloth's long side, 8 to 48: coarse cloth folds in facets, fine cloth in curves.
pin	"sheet" \| "banner" \| "corners"	"sheet"	How the cloth is held: lying flat, hanging from a rod, or pinned at its two top corners.
lift	number	0.5	How far a pinch raises the fabric toward you, 0 to 1.
grip	number	0.35	How much fabric a pinch takes, 0 (a single point) to 1 (a handful).
ripple	number	0.5	How many soft ripples the cloth leaves as it returns, 0 to 1.
gravity	number	0.5	The cloth's weight when it hangs (banner and corners), 0 to 1.
wind	number	0.5	How much a passing pointer pushes the cloth, 0 to 1.
sheen	number	0.35	The highlight along ridges, 0 (cotton) to 1 (silk).
shadow	boolean	true	Lifted cloth casts a soft shadow.
dpr	number	2	The highest device pixel ratio drawn, capped at 2.
paused	boolean	false	Freeze the cloth where it is.
interactive	boolean	true	The pointer and the keyboard move the cloth; false leaves it still and out of the tab order.
onGrabChange	(grabbing: boolean) => void	—	Fires when the cloth is taken hold of (true) and let go (false), by pointer or keys.
className	string	"aspect-[2/1] w-full"	Size the box here.