KQ-1880 · COUNTER/DIVE

Counter Dive

A giant word in a geometric monoline alphabet drawn in code, its strokes filled with a picture on a plain ground; as its scroll container scrolls through the section, the pinned stage magnifies the word around one letter's hole (the O of BROOK by default) and slides it to the middle of the frame. The hole is a window: the ground inside it thins away to show the picture beyond at its own depth, the strokes rush out past the edges as a flat ink, and you pass through into the picture, where the caption rises in; scrolling back pulls you out through the same hole. The shown progress follows the scroll on a critically damped spring with the springs.glide constants and the scale is exponential in progress, so the dive keeps a steady speed through depth; on the focused stage Down, Page Down and Space dive deeper, Up and Page Up back out, and Home and End jump to either end.

KQ-1880 · COUNTER/DIVE

Coldbrook · A lodge at the head of the valley

Twelve rooms, one fire, and the brook under the window. Scroll down.

Coldbrook · October

The valley, at the hour the brook catches the sun.

Rooms open from April to November. Breakfast is served by the fire from seven; the path down to the water starts at the back door.

word · scroll to dive into the O

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/counter-dive

Props

word: string; default "BROOK"; The word, in capitals A–Z and spaces; other characters are dropped.
letter: number | "auto"; default "auto"; Which letter to dive through, by its index in the word, or the most central letter with a hole.
weight: number; default 0.5; Stroke weight of the letters, 0 to 1: hairline letters with wide counters to heavy ones with portholes.
zoom: number; default 90; How far the word magnifies, 40 to 200: a gentle dive to a rush through the hole.
range: number; default 900; Scroll distance the dive takes, px (400 to 1600).
height: number; default 480; Height of the pinned stage, px. Give it the height of the scroll container it sits in.
src: string; default a drawn valley at dusk; The picture: in the letters, and beyond the hole.
alt: string; default describes the drawn valley; Describes the picture for assistive technology.
ground: string; default "var(--background)"; The plain ground the word sits on, any CSS colour.
ink: string; default a dusk pigment; The flat colour the strokes become as they magnify past you, any CSS colour.
as: "h1" | "h2" | "h3"; default "h2"; The element that carries the word for assistive technology.
children: ReactNode; default —; Shown in the picture once you are through.
onProgressChange: (progress: number) => void; default —; Fires as the dive progresses, 0 to 1, from the scroll that moved it.
onPhaseChange: (phase: "word" | "diving" | "through") => void; default —; Fires when the dive moves between the word, diving and through.
className: string; default —; Classes for the section; it takes the width of its column and the height of `height` plus `range`.

Prop	Type	Default	Description
word	string	"BROOK"	The word, in capitals A–Z and spaces; other characters are dropped.
letter	number \| "auto"	"auto"	Which letter to dive through, by its index in the word, or the most central letter with a hole.
weight	number	0.5	Stroke weight of the letters, 0 to 1: hairline letters with wide counters to heavy ones with portholes.
zoom	number	90	How far the word magnifies, 40 to 200: a gentle dive to a rush through the hole.
range	number	900	Scroll distance the dive takes, px (400 to 1600).
height	number	480	Height of the pinned stage, px. Give it the height of the scroll container it sits in.
src	string	a drawn valley at dusk	The picture: in the letters, and beyond the hole.
alt	string	describes the drawn valley	Describes the picture for assistive technology.
ground	string	"var(--background)"	The plain ground the word sits on, any CSS colour.
ink	string	a dusk pigment	The flat colour the strokes become as they magnify past you, any CSS colour.
as	"h1" \| "h2" \| "h3"	"h2"	The element that carries the word for assistive technology.
children	ReactNode	—	Shown in the picture once you are through.
onProgressChange	(progress: number) => void	—	Fires as the dive progresses, 0 to 1, from the scroll that moved it.
onPhaseChange	(phase: "word" \| "diving" \| "through") => void	—	Fires when the dive moves between the word, diving and through.
className	string	—	Classes for the section; it takes the width of its column and the height of `height` plus `range`.