KQ-1872 · QUILTED/FIELDS

Quilted Fields

An endless low flight over farmland laid out like a patchwork quilt, drawn per pixel in one WebGL2 pass: irregular plots of furrows, drilled rows, pasture, flowering crops and fallow, each padded a little toward its middle and divided by hedgerows drawn as stitching — a wandering dark seam with a pale running stitch beside it and trees at the corners — fading into a soft haze at the horizon. The pointer banks the flight on the springs.drift constants, the horizon rolling with it while the flight turns and the quilt sweeps sideways, and a new season re-dyes the fields one by one from the horizon in. The bank chip at the foot is a real slider: arrows bank 5°, Page keys 10°, Home and End to the limits.

KQ-1872 · QUILTED/FIELDS

Fieldline Aerial · Survey 14

Every field, stitched in.

summer · wings level · 130 m

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/quilted-fields

Props

children: React.ReactNode; default —; Content over the flight: a hero line, a caption. It stays fully interactive.
speed: number; default 0.4; How fast the flight goes, 0 (hovering) to 1 (brisk).
altitude: number; default 0.35; How high the flight is, 0 (hedge-top) to 1 (high over the quilt).
season: "spring" | "summer" | "harvest" | "winter"; default "summer"; The fields' palette; a change re-dyes the quilt field by field from the horizon in.
bank / defaultBank: number; default 0; The bank angle in degrees, −18 (left) to 18 (right); controlled or uncontrolled.
onBankChange: (degrees: number) => void; default —; Fires from the hover, drag or key that banked the flight, with whole degrees.
followPointer: boolean; default true; A hovering mouse or pen banks the flight; a finger drags sideways.
levelOnLeave: boolean; default true; Level the wings when the pointer leaves.
fieldSize: number; default 0.5; How big the fields are, 0 (small plots) to 1 (broad fields).
hedgerows: number; default 0.6; How heavy the hedgerow stitching is, 0 (none) to 1 (thick seams with trees).
haze: number; default 0.5; How much the distance fades into the haze, 0 (clear) to 1 (soft).
palette: string[]; default —; Four CSS colours for the fields, overriding the season's own.
skyColor: string; default a pale (light) or dusk (dark) tint of the accent token; The sky over the horizon, any CSS colour; a dark sky turns the light to evening.
paused: boolean; default false; Hold the flight where it is.
seed: number; default 1; Seeds the plots, their crops and where the flight starts.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Bank"; The bank control's accessible name.
disabled: boolean; default false; The flight cannot be banked.
className: string; default —; Sizes the piece; it fills its parent by default.

Prop	Type	Default	Description
children	React.ReactNode	—	Content over the flight: a hero line, a caption. It stays fully interactive.
speed	number	0.4	How fast the flight goes, 0 (hovering) to 1 (brisk).
altitude	number	0.35	How high the flight is, 0 (hedge-top) to 1 (high over the quilt).
season	"spring" \| "summer" \| "harvest" \| "winter"	"summer"	The fields' palette; a change re-dyes the quilt field by field from the horizon in.
bank / defaultBank	number	0	The bank angle in degrees, −18 (left) to 18 (right); controlled or uncontrolled.
onBankChange	(degrees: number) => void	—	Fires from the hover, drag or key that banked the flight, with whole degrees.
followPointer	boolean	true	A hovering mouse or pen banks the flight; a finger drags sideways.
levelOnLeave	boolean	true	Level the wings when the pointer leaves.
fieldSize	number	0.5	How big the fields are, 0 (small plots) to 1 (broad fields).
hedgerows	number	0.6	How heavy the hedgerow stitching is, 0 (none) to 1 (thick seams with trees).
haze	number	0.5	How much the distance fades into the haze, 0 (clear) to 1 (soft).
palette	string[]	—	Four CSS colours for the fields, overriding the season's own.
skyColor	string	a pale (light) or dusk (dark) tint of the accent token	The sky over the horizon, any CSS colour; a dark sky turns the light to evening.
paused	boolean	false	Hold the flight where it is.
seed	number	1	Seeds the plots, their crops and where the flight starts.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Bank"	The bank control's accessible name.
disabled	boolean	false	The flight cannot be banked.
className	string	—	Sizes the piece; it fills its parent by default.