KQ-928 · LOCATION/SHARE

Location Share

A live location in the thread. The pin glides across a procedural map on glide as each new position arrives, the walked path draws behind it, and an accuracy halo breathes on a slow reversing tween. A ring around the sharer's initials empties as the share runs out, driven from a secondsLeft prop rather than a clock read during render, and stopping dims the pin to a last-seen marker; a polite region speaks one sentence per place change, never per tick.

KQ-928 · LOCATION/SHARE

Ines Aguiar
Sharing live · near Basin Quay15:00
Within 20 metres of Basin Quay

Live · Basin Quay · 15 min left

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/location-share

Props

person: string; default —; Who is sharing; the puck's initials are taken from it.
position: { x: number; y: number }; default —; The pin, normalised 0 to 1 inside the map box; every derived coordinate is rounded before it reaches an attribute.
trail: Array<{ x: number; y: number }>; default []; The path already walked, oldest first, drawn as a polyline behind the pin.
place: string; default —; The nearest landmark in words; a change here is what the live region announces.
secondsLeft: number; default —; Seconds of sharing left. The host counts it down; the card never reads a clock.
totalSeconds: number; default 900; The share's full length, which the countdown ring is drawn against.
status: "live" | "ended"; default "live"; Ended dims the pin, stops the halo and replaces the controls with a last-seen line.
lastSeenTime: string; default —; A preformatted time shown once the share has ended.
accuracyMeters: number; default 20; Sizes the halo and is spoken in the map's accessible name.
seed: number; default 7; Picks the procedural map: streets, river and park all come from integers.
onStop: () => void; default —; Fires from the Stop control.
onExtend: (seconds: number) => void; default —; Fires from Add 15 minutes with 900.
label: string; default —; Names the card for assistive technology.
className: string; default —; Extra classes on the card.

Prop	Type	Default	Description
person	string	—	Who is sharing; the puck's initials are taken from it.
position	{ x: number; y: number }	—	The pin, normalised 0 to 1 inside the map box; every derived coordinate is rounded before it reaches an attribute.
trail	Array<{ x: number; y: number }>	[]	The path already walked, oldest first, drawn as a polyline behind the pin.
place	string	—	The nearest landmark in words; a change here is what the live region announces.
secondsLeft	number	—	Seconds of sharing left. The host counts it down; the card never reads a clock.
totalSeconds	number	900	The share's full length, which the countdown ring is drawn against.
status	"live" \| "ended"	"live"	Ended dims the pin, stops the halo and replaces the controls with a last-seen line.
lastSeenTime	string	—	A preformatted time shown once the share has ended.
accuracyMeters	number	20	Sizes the halo and is spoken in the map's accessible name.
seed	number	7	Picks the procedural map: streets, river and park all come from integers.
onStop	() => void	—	Fires from the Stop control.
onExtend	(seconds: number) => void	—	Fires from Add 15 minutes with 900.
label	string	—	Names the card for assistive technology.
className	string	—	Extra classes on the card.

Location Share

Ines Aguiar

Install

Props