KQ-1867 · COASTER/TRACK

Coaster Track

A marquee drawn as a roller coaster in fine line work, its sentence riding one letter to a car: towed up the chain lift, slowed by gravity on every climb and hurried down every drop, eased by rolling friction and stopped on the brake run, so the sentence bunches over the crests, stretches on the drops and rides upside down through the loop. Holding the lift hill grabs the chain, which runs up to towBoost times faster on springs.snap and eases back on springs.drift when let go; a drag along it tows at the finger's pace. The chain is a real button — hold Space or Enter to tow — and the sentence is read once from an sr-only copy.

KQ-1867 · COASTER/TRACK

Waylight · the long way round

riding · hold the lift hill to tow

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/coaster-track

Props

text: string; default —; The sentence the cars carry, split by grapheme so emoji and accents ride whole.
as: "p" | "h1" | "h2" | "h3" | "span" | "div"; default "p"; The element that carries the sentence, once, for assistive technology.
track: "classic" | "camel" | "twin" | CoasterPoint[]; default "classic"; A preset ride built to the box — classic (drop, hump, loop), camel (falling humps), twin (two loops) — or your own { x, y, lift? } points in 0–1 of the box, smoothed into a curve.
gravity: number; default 1; How hard the drops pull, 0.4 to 2: more gravity, faster drops, more bunching and stretching.
spacing: number; default 1.25; Car spacing at the station, in em.
speed: number; default 5; Station speed in em per second; the chain lift runs a little slower.
towBoost: number; default 2.6; How many times faster the chain tows while it is held.
friction: number; default 0.2; Rolling friction, 0 to 1.
separator: string; default " · "; Ridden between one pass of the sentence and the next.
cars: boolean; default true; Draw the little cars under the letters; off, the letters ride bare.
supports: boolean; default true; Draw the support struts down to the ground.
trackColor: string; default "var(--ink-3)"; The track's colour, any CSS colour.
carColor: string; default "var(--accent-bright)"; The cars' colour, and the chain's while it tows.
trigger: "inView" | "hover"; default "inView"; Ride whenever the track is on screen, or only while it is hovered or holds focus.
paused: boolean; default false; Hold every car where it is.
onLap: (laps: number) => void; default —; Fires each time a whole pass of the sentence has left the track, with the count.
onTowChange: (towing: boolean) => void; default —; Fires when the chain is grabbed and when it is let go.
className: string; default "h-48"; Size the ride with a height class; the letters take the inherited font size and the track is rebuilt to the box.

Prop	Type	Default	Description
text	string	—	The sentence the cars carry, split by grapheme so emoji and accents ride whole.
as	"p" \| "h1" \| "h2" \| "h3" \| "span" \| "div"	"p"	The element that carries the sentence, once, for assistive technology.
track	"classic" \| "camel" \| "twin" \| CoasterPoint[]	"classic"	A preset ride built to the box — classic (drop, hump, loop), camel (falling humps), twin (two loops) — or your own { x, y, lift? } points in 0–1 of the box, smoothed into a curve.
gravity	number	1	How hard the drops pull, 0.4 to 2: more gravity, faster drops, more bunching and stretching.
spacing	number	1.25	Car spacing at the station, in em.
speed	number	5	Station speed in em per second; the chain lift runs a little slower.
towBoost	number	2.6	How many times faster the chain tows while it is held.
friction	number	0.2	Rolling friction, 0 to 1.
separator	string	" · "	Ridden between one pass of the sentence and the next.
cars	boolean	true	Draw the little cars under the letters; off, the letters ride bare.
supports	boolean	true	Draw the support struts down to the ground.
trackColor	string	"var(--ink-3)"	The track's colour, any CSS colour.
carColor	string	"var(--accent-bright)"	The cars' colour, and the chain's while it tows.
trigger	"inView" \| "hover"	"inView"	Ride whenever the track is on screen, or only while it is hovered or holds focus.
paused	boolean	false	Hold every car where it is.
onLap	(laps: number) => void	—	Fires each time a whole pass of the sentence has left the track, with the count.
onTowChange	(towing: boolean) => void	—	Fires when the chain is grabbed and when it is let go.
className	string	"h-48"	Size the ride with a height class; the letters take the inherited font size and the track is rebuilt to the box.