KQ-1363 · ORBIT/SCRIPT

Orbit Script

Text set round a ring at its measured advances, turning at a cruising speed: a pointer over it brakes it to a stop with friction while the nearest letter lifts off the ring on the snap spring and turns upright to face the reader, a drag spins it 1:1 about its centre and a flick coasts down by the same friction back to cruise, and on arrival the letters lay themselves onto the ring clockwise as it spools up. It is a slider in the tab order: the arrow keys step it one letter at a time on the snap spring, Page Up and Page Down a quarter turn, and Space pauses the turn.

KQ-1363 · ORBIT/SCRIPT

3 rpm · drag to spin

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/orbit-script

Props

text: string; default —; The text set round the ring, read clockwise from the top.
center: ReactNode; default —; What sits in the middle of the ring: an icon, a number, a mark.
as: "div" | "p" | "span" | "h2" | "h3"; default "div"; The element that carries the text for assistive technology.
speed: number; default 3; Cruising speed, turns a minute; 0 stands still.
direction: "cw" | "ccw"; default "cw"; Which way the ring turns.
radius: number; default 4.5; The ring's radius, em of the text size.
spacing: number; default 0.22; Extra tracking between letters along the ring, em.
friction: number; default 0.5; How hard the ring brakes and how soon a flick runs out, 0 to 1.
lift: number; default 0.35; How far the letter nearest the pointer lifts off the ring, em.
face: boolean; default true; The lifted letter turns upright to face the reader.
track: boolean; default true; Rule a hairline orbit under the letters.
accent: string; default "var(--accent-bright)"; The lifted letter's colour, any CSS colour.
interactive: boolean; default true; Hover brakes, drag spins, keys step; false makes the ring decoration only.
paused: boolean; default false; Hold the ring still; it brakes to a stop with friction.
trigger: "mount" | "inView" | "hover" | "manual"; default "inView"; When the letters lay themselves onto the ring.
once: boolean; default true; Play once, or again each time it re-enters view or is hovered.
delay: number; default 0; Wait before the entrance, ms.
play: boolean; default false; With trigger "manual": true plays the entrance, false empties the ring.
sound: boolean; default false; Tick as letters pass the top while the visitor turns the ring.
disabled: boolean; default false; The ring keeps turning but cannot be braked, spun or stepped.
onComplete: () => void; default —; The entrance has finished and the ring is up to speed.
onStep: (index: number) => void; default —; The letter at the top changed under the visitor's hand or keys: its index.
className: string; default —; Classes for the root; the ring is sized in em from its font size.

Prop	Type	Default	Description
text	string	—	The text set round the ring, read clockwise from the top.
center	ReactNode	—	What sits in the middle of the ring: an icon, a number, a mark.
as	"div" \| "p" \| "span" \| "h2" \| "h3"	"div"	The element that carries the text for assistive technology.
speed	number	3	Cruising speed, turns a minute; 0 stands still.
direction	"cw" \| "ccw"	"cw"	Which way the ring turns.
radius	number	4.5	The ring's radius, em of the text size.
spacing	number	0.22	Extra tracking between letters along the ring, em.
friction	number	0.5	How hard the ring brakes and how soon a flick runs out, 0 to 1.
lift	number	0.35	How far the letter nearest the pointer lifts off the ring, em.
face	boolean	true	The lifted letter turns upright to face the reader.
track	boolean	true	Rule a hairline orbit under the letters.
accent	string	"var(--accent-bright)"	The lifted letter's colour, any CSS colour.
interactive	boolean	true	Hover brakes, drag spins, keys step; false makes the ring decoration only.
paused	boolean	false	Hold the ring still; it brakes to a stop with friction.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	When the letters lay themselves onto the ring.
once	boolean	true	Play once, or again each time it re-enters view or is hovered.
delay	number	0	Wait before the entrance, ms.
play	boolean	false	With trigger "manual": true plays the entrance, false empties the ring.
sound	boolean	false	Tick as letters pass the top while the visitor turns the ring.
disabled	boolean	false	The ring keeps turning but cannot be braked, spun or stepped.
onComplete	() => void	—	The entrance has finished and the ring is up to speed.
onStep	(index: number) => void	—	The letter at the top changed under the visitor's hand or keys: its index.
className	string	—	Classes for the root; the ring is sized in em from its font size.