KQ-1160 · LIVE/ACTIVITY

Live Activity

A live activity card for something on its way: each reported position eases a van, car or plane along a route line with a tween paced by the distance while the travelled line fills behind it, stops light as the vehicle actually passes them with a ring that pulses out once, the stage name crosses on snap and the ETA counts down from now with its minutes rolling on snap. A tap opens a measured map strip on glide where the same route, seeded streets or a flight arc, is drawn up to the vehicle, rebuilt per frame from the same eased position. The card is a real button that toggles the map with Enter or Space and names its stage and time left; Delete dismisses it.

KQ-1160 · LIVE/ACTIVITY

Basinworks order 4471 · 30% of the way · 8 min left

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/live-activity

Props

notices: { id: string; title: string; body?: string; tone?: "info" | "success" | "warn" | "danger"; progress: number; arrival?: number }[]; default —; The activities: progress is the last reported position (0 to 1), arrival when it is due in ms. The first is in front; the rest wait as pills.
onDismiss: (id: string) => void; default —; Fires from the dismiss button or Delete on the front card.
now: number | Date; default —; The current time, so the ETA renders the same on the server. Advance it to count down; without it the card keeps its own clock after mount.
stages: number; default 4; How many stops the route has, 3 to 5, named from the mode's five.
mode: "courier" | "ride" | "flight"; default "courier"; What is travelling: a van on orthogonal streets, a car on rounded ones, or a plane on an arc over the sea.
expand: boolean; default false; Whether the map strip is open. A tap toggles it; changing this prop moves it there.
onExpandChange: (open: boolean) => void; default —; Fires from the tap or key that opened or closed the map.
labels: string[]; default —; Names for the stops, first to last: exactly `stages` of them, or five to sample from.
label: string; default "Live activity"; The region's accessible name.
sound: boolean; default false; Tick when the visitor opens or closes the map, and chime each passed stop as the route draws. Live updates stay silent.
disabled: boolean; default false; The card still tracks but cannot be opened, switched or dismissed.
className: string; default —; Classes for the region.

Prop	Type	Default	Description
notices	{ id: string; title: string; body?: string; tone?: "info" \| "success" \| "warn" \| "danger"; progress: number; arrival?: number }[]	—	The activities: progress is the last reported position (0 to 1), arrival when it is due in ms. The first is in front; the rest wait as pills.
onDismiss	(id: string) => void	—	Fires from the dismiss button or Delete on the front card.
now	number \| Date	—	The current time, so the ETA renders the same on the server. Advance it to count down; without it the card keeps its own clock after mount.
stages	number	4	How many stops the route has, 3 to 5, named from the mode's five.
mode	"courier" \| "ride" \| "flight"	"courier"	What is travelling: a van on orthogonal streets, a car on rounded ones, or a plane on an arc over the sea.
expand	boolean	false	Whether the map strip is open. A tap toggles it; changing this prop moves it there.
onExpandChange	(open: boolean) => void	—	Fires from the tap or key that opened or closed the map.
labels	string[]	—	Names for the stops, first to last: exactly `stages` of them, or five to sample from.
label	string	"Live activity"	The region's accessible name.
sound	boolean	false	Tick when the visitor opens or closes the map, and chime each passed stop as the route draws. Live updates stay silent.
disabled	boolean	false	The card still tracks but cannot be opened, switched or dismissed.
className	string	—	Classes for the region.