KQ-875 · LAST/SEEN

Last Seen

A wording rather than a clock: minutes arrive as a prop and the component only adds to them from a ticker it is asked to run, in an effect with cleanup that stops while the tab is hidden. As the total crosses a threshold the label re-writes itself — just now, a minute ago, an hour ago — with the old words leaving upward and the new arriving from below on glide, stacked in one grid cell and cross-faded so a fast ticker never leaves the reading behind. Coming online swaps the label for a dot that lands on recoil beside the word Online.

KQ-875 · LAST/SEEN

Ines MoreauLast seen 4 minutes ago · 14:52

Ines Moreau — 4 minutes ago

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/last-seen

Props

name: string; default —; Whose presence it is; opens the spoken sentence.
minutesAgo: number; default 0; Minutes since they were last seen, from the host — never from a clock.
online: boolean; default false; Swaps the label for a dot and the word Online.
at: string; default —; An already-formatted wall time ("14:52"), printed after the wording.
ticking: boolean; default false; Runs the internal count-up; the host owns the decision.
tickMs: number; default 60000; Milliseconds per added minute; a demo can shorten it to make the climb visible.
label: string; default "Last seen"; Leading words while offline.
format: (minutes: number) => string; default —; Overrides the wording ladder for other locales.
onWordingChange: (wording: string) => void; default —; Fires from an effect whenever the drawn reading changes.

Prop	Type	Default	Description
name	string	—	Whose presence it is; opens the spoken sentence.
minutesAgo	number	0	Minutes since they were last seen, from the host — never from a clock.
online	boolean	false	Swaps the label for a dot and the word Online.
at	string	—	An already-formatted wall time ("14:52"), printed after the wording.
ticking	boolean	false	Runs the internal count-up; the host owns the decision.
tickMs	number	60000	Milliseconds per added minute; a demo can shorten it to make the climb visible.
label	string	"Last seen"	Leading words while offline.
format	(minutes: number) => string	—	Overrides the wording ladder for other locales.
onWordingChange	(wording: string) => void	—	Fires from an effect whenever the drawn reading changes.