KQ-380 · CLOTH/DRAPE

Cloth Drape

The interface as a hanging cloth. A grid mesh carries the painted page; wind rolls slow waves through it, the cursor pushes a dent that springs back, and the shading follows the folds. The mesh is a few thousand vertices, so the drape costs almost nothing.

KQ-380 · CLOTH/DRAPE

Fernworks · shade-cloth order

Six bays, one cut list.

The order the loft is cutting against this week, hung here the way the finished panels will hang over the hoop house. Run the cursor over it — the weave gives under the pointer and settles back once you move on.

RunBayMetresState
R-12Bay 418.5 mcut
R-13Bay 222.0 mpending
R-14Bay 714.25 mhemmed
58.75 m total

hung like cloth

Install

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

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

Props

PropTypeDefaultDescription
cols / rowsnumberThe mesh resolution.
wind / speed / amplitudenumberHow much the cloth moves at rest, how fast the waves travel, and how deep they are in px.
push / radius / shadingnumberHow deep the cursor dents the cloth, how wide the dent is, and how strongly folds are lit.