KQ-1800 · PLAY/PARACHUTE

Play Parachute

A playground parachute seen from above at an angle: bright silk panels round a small centre hole, sagging into a shallow bowl with each panel puffed between its seams, held at the hem by handle loops over a dotted ground. The canopy is a height field running the wave equation on a polar grid; drag near the rim and the hem rises 1:1 under the finger, shake it and waves roll inward and round with a satin sheen along the weave on every crest, and let go and the hem drops on springs.recoil with the hand's velocity. A tap throws the whole canopy up into a dome that settles slowly on its trapped air, tossing the little ball that rolls on the silk; the keyboard moves a ring between handles on springs.snap, Up lifts an edge on snap and lets it fall on recoil, and Enter throws.

KQ-1800 · PLAY/PARACHUTE

Fernworks Play · Saturday club

Parachute games at 10:00

Drag an edge to send waves across; tap to throw it up.

resting · 12 panels · 8 handles

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/play-parachute

Props

panels: number; default 12; How many silk panels make the canopy, 4 to 24.
colors: string[]; default —; Panel colours, cycled round the canopy; defaults to four token pigments.
billow: number; default 0.6; How high waves and a throw lift the silk, 0 to 1.
sheen: number; default 0.6; The satin highlight on every crest, 0 (matte cotton) to 1 (bright silk).
tension: number; default 0.5; How taut the silk is, 0 (slow, lazy waves) to 1 (quick ones).
settle: number; default 0.5; How quickly waves and the dome die away, 0 (they roll on) to 1 (they stop soon).
tilt: number; default 30; The view's height above the ground in degrees, 20 (low and long) to 70 (from above).
handles: number; default 8; Handles round the rim, 4 to 16: the stops the keyboard moves between.
ball: boolean; default true; A small ball rolls on the silk.
ballColor: string; default "oklch(from var(--warn) 0.95 0.03 h)"; The ball's colour, any CSS colour.
trigger: "inView" | "mount" | "manual"; default "inView"; What throws a soft billow by itself: coming into view, mounting, or nothing.
onThrow: () => void; default —; Fires when the visitor throws the canopy up.
onLift: (handle: number) => void; default —; Fires when the visitor lifts or shakes an edge, with the handle's index (0 is nearest the viewer, counting to the right).
paused: boolean; default false; Hold the silk where it is.
seed: number; default 3; Seeds where the ball starts.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Play parachute"; The canopy's accessible name.
sound: boolean; default false; Play the swish of the silk for the visitor's own throws, lifts and shakes.
disabled: boolean; default false; Shows the canopy but takes no input.
className: string; default "h-52 w-full"; Sizes the box; the canopy, its dome and a lifted edge always fit inside it.

Prop	Type	Default	Description
panels	number	12	How many silk panels make the canopy, 4 to 24.
colors	string[]	—	Panel colours, cycled round the canopy; defaults to four token pigments.
billow	number	0.6	How high waves and a throw lift the silk, 0 to 1.
sheen	number	0.6	The satin highlight on every crest, 0 (matte cotton) to 1 (bright silk).
tension	number	0.5	How taut the silk is, 0 (slow, lazy waves) to 1 (quick ones).
settle	number	0.5	How quickly waves and the dome die away, 0 (they roll on) to 1 (they stop soon).
tilt	number	30	The view's height above the ground in degrees, 20 (low and long) to 70 (from above).
handles	number	8	Handles round the rim, 4 to 16: the stops the keyboard moves between.
ball	boolean	true	A small ball rolls on the silk.
ballColor	string	"oklch(from var(--warn) 0.95 0.03 h)"	The ball's colour, any CSS colour.
trigger	"inView" \| "mount" \| "manual"	"inView"	What throws a soft billow by itself: coming into view, mounting, or nothing.
onThrow	() => void	—	Fires when the visitor throws the canopy up.
onLift	(handle: number) => void	—	Fires when the visitor lifts or shakes an edge, with the handle's index (0 is nearest the viewer, counting to the right).
paused	boolean	false	Hold the silk where it is.
seed	number	3	Seeds where the ball starts.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Play parachute"	The canopy's accessible name.
sound	boolean	false	Play the swish of the silk for the visitor's own throws, lifts and shakes.
disabled	boolean	false	Shows the canopy but takes no input.
className	string	"h-52 w-full"	Sizes the box; the canopy, its dome and a lifted edge always fit inside it.