KQ-1241 · LOOM/FIELD

Loom Field

A background of woven cloth, warp and weft interlaced thread by thread in a plain, twill or basket weave, with your content on top; a hovering hand is a light touch and a press goes in deep, opening an eye in the weave as the warps part sideways and the wefts up and down. Every crossing is a spring held straight along its thread by tension, so the threads lag the finger, a flick runs a ripple down them, and a lifted hand lets the eye close with two small overshoots near the recoil spring's damping, while the press itself eases in over a blink and out over the base duration. A transparent button behind the content is the keyboard's way in: arrow keys move the hand and Space or Enter held presses into the cloth.

KQ-1241 · LOOM/FIELD

Fernworks Mill

Autumn cloth is on the loom

Indigo twill, 340 gsm

at rest · twill weave, indigo

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/loom-field

Props

children: ReactNode; default —; The content on top of the cloth, in its own layer that fills the box: a hero, a heading, a call to action.
weave: "plain" | "twill" | "basket"; default "twill"; How the threads interlace: a checker, a 3/1 diagonal rib like denim, or threads working in pairs.
press: number; default 0.6; How hard the hand presses, 0 to 1: how wide the threads part (0.7 to 3.2 thread pitches) and how deep the dent's shade reads.
thread: "indigo" | "rust" | "moss"; default "indigo"; The warp's dye, a fixed pigment; the weft is the same dye washed into the page, so it follows the theme.
label: string; default "Woven cloth"; The accessible name of the cloth's keyboard surface.
onPressChange: (pressed: boolean) => void; default —; The hand pressed into the cloth (true) or let go (false), reported from the pointer or keys that did it.
disabled: boolean; default false; The cloth is drawn and holds still; the hand is ignored and touch scrolling is left to the page.
className: string; default —; Sizes the box; the default is h-full w-full, so it fills its container.

Prop	Type	Default	Description
children	ReactNode	—	The content on top of the cloth, in its own layer that fills the box: a hero, a heading, a call to action.
weave	"plain" \| "twill" \| "basket"	"twill"	How the threads interlace: a checker, a 3/1 diagonal rib like denim, or threads working in pairs.
press	number	0.6	How hard the hand presses, 0 to 1: how wide the threads part (0.7 to 3.2 thread pitches) and how deep the dent's shade reads.
thread	"indigo" \| "rust" \| "moss"	"indigo"	The warp's dye, a fixed pigment; the weft is the same dye washed into the page, so it follows the theme.
label	string	"Woven cloth"	The accessible name of the cloth's keyboard surface.
onPressChange	(pressed: boolean) => void	—	The hand pressed into the cloth (true) or let go (false), reported from the pointer or keys that did it.
disabled	boolean	false	The cloth is drawn and holds still; the hand is ignored and touch scrolling is left to the page.
className	string	—	Sizes the box; the default is h-full w-full, so it fills its container.