KQ-518 · SECTION/DOTS

Section Dots

A rail of dots down the side of a scrolling story. The active dot stretches into a pill on snap, a layout animation so the shape itself travels rather than a dot blinking on elsewhere, and its label slides out from the rail on hover or focus. The rail reads the container with an IntersectionObserver, and Up and Down move between dots while Enter scrolls the container to that section.

KQ-518 · SECTION/DOTS

Step 1 of 4

Intake

Rails arrive on the north dock and are logged against the run before anything is unpacked.

Step 2 of 4

Calibrate

Each rail is swept twice: once cold, once at working temperature, and the drift between them is kept.

Step 3 of 4

Assemble

Clamps go on in pairs so the plate never carries load on one side while the second is torqued.

Step 4 of 4

Ship

The run leaves as one crate with its sweep sheet, and the depot signs for the drift figures.

Section Intake

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/section-dots

Props

sections: { id: string; label: string }[]; default —; Ids of the section elements inside the container, in document order.
container: React.RefObject<HTMLElement | null>; default —; The scrolling element the rail watches and scrolls.
side: "left" | "right"; default right; Which edge of the container the rail sits on.
onActiveChange: (id: string) => void; default —; Fires when the section under the viewport changes.
label: string; default Sections; Names the rail for assistive technology.

Prop	Type	Default	Description
sections	{ id: string; label: string }[]	—	Ids of the section elements inside the container, in document order.
container	React.RefObject<HTMLElement \| null>	—	The scrolling element the rail watches and scrolls.
side	"left" \| "right"	right	Which edge of the container the rail sits on.
onActiveChange	(id: string) => void	—	Fires when the section under the viewport changes.
label	string	Sections	Names the rail for assistive technology.