KQ-1434 · SURVEY/CONTOURS

Survey Contours

A background that is a living topographic sheet: contour lines traced from a slowly breathing height field, every fifth an index contour drawn heavier with its elevation printed small along it and the line broken under the figures, spot heights on the highest summits, over a faint tint that leans toward the high ground. The hand raises a hill — the land under it rises on springs.drift, new rings bloom round it in the hill colour and a spot height rides the summit with its figure rolling as it climbs — and a press heaves it higher on springs.recoil, the rings rippling out and back with each bounce; the lowlands stand from the first frame and, the first time it is seen, the rest of the survey inks in from lower to higher in a cascade. Keyboard focus on content inside the sheet raises the hill under the focused element.

KQ-1434 · SURVEY/CONTOURS

Fieldline Survey

Every ridge, measured

Sheet 14 · 1:25 000

sheet drawn · move to raise a hill

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/survey-contours

Props

children: React.ReactNode; default —; The content above the sheet: a hero, a heading, a call to action.
interval: number; default 20; The height between one contour line and the next, in the sheet's units.
weight: number; default 1; How heavy the lines are drawn, 0.5 to 2; every fifth line is heavier still.
labels: boolean; default true; Print the elevation on the heavy lines (breaking each line under its label), spot heights on the highest summits, and a spot height on the raised hill.
relief: number; default 360; How far the land rises from its lowest point to its highest, in the sheet's units.
scale: number; default 1; The size of the hills and valleys, 0.5 to 2.
breathe: number; default 0.5; How much the land swells and settles as it breathes, 0 to 1.
speed: number; default 1; How fast the land breathes, 0 to 2; 0 holds it still.
tint: number; default 0.35; How strongly the high ground is tinted, 0 to 1.
lineColor: string; default "color-mix(in oklab, var(--foreground) 46%, var(--background))"; The contour lines' colour, as a CSS colour.
hillColor: string; default "var(--accent-bright)"; The colour the lines take round the raised hill, as a CSS colour.
tintColor: string; default "var(--accent)"; The colour the high ground leans toward, as a CSS colour.
unit: string; default "m"; The unit printed after the spot height.
interactive: boolean; default true; The hand (and keyboard focus inside) raises a hill under it, and a press heaves it higher.
pointerStrength: number; default 0.7; How high the hand raises the land, 0 to 1.
radius: number; default 70; The width of the raised hill, in CSS px.
seed: number; default 1; Picks the landscape: the same seed surveys the same land.
paused: boolean; default false; Holds the land still; the hand still raises its hill.
intro: boolean; default true; Ink the higher contours in, lower to higher, the first time the sheet is seen; the lowlands are drawn from the start.
dpr: number; default 2; The highest device pixel ratio the lines are drawn at, never above 2.
onSummitChange: (elevation: number | null) => void; default —; Reports the raised hill's summit once it settles, and null once it has subsided.
className: string; default "h-full w-full"; Sizes the box.
contentClassName: string; default —; Classes for the content layer above the sheet.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the sheet: a hero, a heading, a call to action.
interval	number	20	The height between one contour line and the next, in the sheet's units.
weight	number	1	How heavy the lines are drawn, 0.5 to 2; every fifth line is heavier still.
labels	boolean	true	Print the elevation on the heavy lines (breaking each line under its label), spot heights on the highest summits, and a spot height on the raised hill.
relief	number	360	How far the land rises from its lowest point to its highest, in the sheet's units.
scale	number	1	The size of the hills and valleys, 0.5 to 2.
breathe	number	0.5	How much the land swells and settles as it breathes, 0 to 1.
speed	number	1	How fast the land breathes, 0 to 2; 0 holds it still.
tint	number	0.35	How strongly the high ground is tinted, 0 to 1.
lineColor	string	"color-mix(in oklab, var(--foreground) 46%, var(--background))"	The contour lines' colour, as a CSS colour.
hillColor	string	"var(--accent-bright)"	The colour the lines take round the raised hill, as a CSS colour.
tintColor	string	"var(--accent)"	The colour the high ground leans toward, as a CSS colour.
unit	string	"m"	The unit printed after the spot height.
interactive	boolean	true	The hand (and keyboard focus inside) raises a hill under it, and a press heaves it higher.
pointerStrength	number	0.7	How high the hand raises the land, 0 to 1.
radius	number	70	The width of the raised hill, in CSS px.
seed	number	1	Picks the landscape: the same seed surveys the same land.
paused	boolean	false	Holds the land still; the hand still raises its hill.
intro	boolean	true	Ink the higher contours in, lower to higher, the first time the sheet is seen; the lowlands are drawn from the start.
dpr	number	2	The highest device pixel ratio the lines are drawn at, never above 2.
onSummitChange	(elevation: number \| null) => void	—	Reports the raised hill's summit once it settles, and null once it has subsided.
className	string	"h-full w-full"	Sizes the box.
contentClassName	string	—	Classes for the content layer above the sheet.