KQ-909 · CALL/END

Call End

Hanging up costs a moment. Holding End drives a motion value from 0 to 1 at a linear rate over holdMs, and that value is the ring's pathLength, so the ring fills at the honest rate of the hold; releasing early stops it, drains the ring on the exit ease and says the call is still up. The call ends from the animation's completion callback, the bar leaves on the exit ease, and the frame glides to the ended line at a ResizeObserver-measured height. Space or Enter held fills the ring, releasing or Escape cancels.

KQ-909 · CALL/END

Coldbrook dispatch

Hold to end the call

live 0:42 · 3 on the call · hold to end

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/call-end

Props

callName: string; default —; The room, printed and spoken.
people: number; default 0; How many are on the call; printed and pluralised.
seconds: number; default —; Elapsed seconds from the host; this component never reads a clock.
holdMs: number; default 900; How long End must be held.
ended / defaultEnded: boolean; default false; The call's state, controlled or initial.
onEndedChange: (ended: boolean) => void; default —; Fires as the call ends and as it is rejoined.
onEnd: (seconds: number) => void; default —; Fires once when a hold completes, with the elapsed seconds at that moment.
onCancel: () => void; default —; Fires when a hold is released before it completes.
onHoldChange: (holding: boolean) => void; default —; Fires as the hold starts and stops.
onRejoin: () => void; default —; Fires from the Rejoin control on the ended line.

Prop	Type	Default	Description
callName	string	—	The room, printed and spoken.
people	number	0	How many are on the call; printed and pluralised.
seconds	number	—	Elapsed seconds from the host; this component never reads a clock.
holdMs	number	900	How long End must be held.
ended / defaultEnded	boolean	false	The call's state, controlled or initial.
onEndedChange	(ended: boolean) => void	—	Fires as the call ends and as it is rejoined.
onEnd	(seconds: number) => void	—	Fires once when a hold completes, with the elapsed seconds at that moment.
onCancel	() => void	—	Fires when a hold is released before it completes.
onHoldChange	(holding: boolean) => void	—	Fires as the hold starts and stops.
onRejoin	() => void	—	Fires from the Rejoin control on the ended line.