KQ-1261 · LAUNCH/PAD

Launch Pad

A deploy button with a launch pad in its left cap: a press arms a countdown ring that drains one segment per second, linearly, while the label's digit rolls on springs.snap, and a second press or Escape aborts. At zero the rocket squats and climbs out through the roof on an accelerating exit ease with exhaust billowing along the floor, the label lifts off after it, and a progress line runs while the onLaunch promise is pending; a resolve drops a flag into the pad on springs.recoil and unfurls it on springs.snap, a reject brings the rocket back nose-down on springs.glide and shakes the button with the error and a retry. Enter and Space press it, Escape aborts the count, and every change is spoken once in a polite live region.

KQ-1261 · LAUNCH/PAD

Fernworks web

main · a41d09c → production

ready · v2.4.1 on production

Open it on the Studio stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/launch-pad

Props

onLaunch: () => Promise<unknown> | unknown; default —; The deploy itself, called at zero. A returned promise keeps the rocket in flight until it settles: resolve lands the flag, reject shows the error.
state: "idle" | "countdown" | "pending" | "success" | "error"; default —; Controlled state. Omit it and the countdown and the promise drive the pad.
onStateChange: (state: LaunchPadState, error?: unknown) => void; default —; Every change of state — a press, the count reaching zero, the promise settling, a hold running out — with the rejection on error. A controlled pad waits for the host to apply it.
onAbort: () => void; default —; A press or Escape during the countdown called the launch off.
countdown: number; default 3; Seconds counted down before lift-off, 0 to 9; each is one segment of the ring. 0 launches on the press.
thrust: number; default 0.6; How hard it launches, 0 to 1: a quicker climb, a longer flame, more exhaust.
shake: number; default 6; How far a failure shakes the button, in px. 0 keeps it still.
progress: number; default —; Known progress of the deploy, 0 to 1. Omit it for an estimate that approaches 92% and never claims the finish.
eta: number; default 2400; How long a deploy usually takes, in ms; paces the estimated progress line.
label: string; default "Deploy"; The idle label.
abortLabel: string; default "Abort"; Shown before the seconds while counting down, when a press aborts.
pendingLabel: string; default "Deploying"; The label while the deploy is in flight.
version: string; default "v2.4.1"; The version that goes live, read out in the success label.
successLabel: string; default "Live · {version}"; The label once live.
errorLabel: string; default "Checks failed"; What failed, shown before the retry. A rejection's own message replaces it and truncates with a title.
retryLabel: string; default "Retry"; The word after the error that says a press tries again.
successHold: number; default 2600; How long Live holds before the pad resets, in ms; 0 keeps it. Counts only while the page is visible.
errorHold: number; default 0; How long a failure holds before the pad resets, in ms; 0 keeps it until retried.
size: "sm" | "md" | "lg"; default "md"; 36, 44 or 52px tall; the rocket, flag and ring scale with it.
accent: string; default "var(--primary)"; The button's face while idle, counting and in flight.
flame: string; default "oklch(from var(--warn) 0.8 c h)"; The exhaust flame's colour.
sound: boolean; default false; Play the countdown ticks, the lift-off, the landing chime and the failure buzz — only for a launch the visitor started.
disabled: boolean; default false; Takes the button out of use.
className: string; default —; Classes for the outer wrapper.

Prop	Type	Default	Description
onLaunch	() => Promise<unknown> \| unknown	—	The deploy itself, called at zero. A returned promise keeps the rocket in flight until it settles: resolve lands the flag, reject shows the error.
state	"idle" \| "countdown" \| "pending" \| "success" \| "error"	—	Controlled state. Omit it and the countdown and the promise drive the pad.
onStateChange	(state: LaunchPadState, error?: unknown) => void	—	Every change of state — a press, the count reaching zero, the promise settling, a hold running out — with the rejection on error. A controlled pad waits for the host to apply it.
onAbort	() => void	—	A press or Escape during the countdown called the launch off.
countdown	number	3	Seconds counted down before lift-off, 0 to 9; each is one segment of the ring. 0 launches on the press.
thrust	number	0.6	How hard it launches, 0 to 1: a quicker climb, a longer flame, more exhaust.
shake	number	6	How far a failure shakes the button, in px. 0 keeps it still.
progress	number	—	Known progress of the deploy, 0 to 1. Omit it for an estimate that approaches 92% and never claims the finish.
eta	number	2400	How long a deploy usually takes, in ms; paces the estimated progress line.
label	string	"Deploy"	The idle label.
abortLabel	string	"Abort"	Shown before the seconds while counting down, when a press aborts.
pendingLabel	string	"Deploying"	The label while the deploy is in flight.
version	string	"v2.4.1"	The version that goes live, read out in the success label.
successLabel	string	"Live · {version}"	The label once live.
errorLabel	string	"Checks failed"	What failed, shown before the retry. A rejection's own message replaces it and truncates with a title.
retryLabel	string	"Retry"	The word after the error that says a press tries again.
successHold	number	2600	How long Live holds before the pad resets, in ms; 0 keeps it. Counts only while the page is visible.
errorHold	number	0	How long a failure holds before the pad resets, in ms; 0 keeps it until retried.
size	"sm" \| "md" \| "lg"	"md"	36, 44 or 52px tall; the rocket, flag and ring scale with it.
accent	string	"var(--primary)"	The button's face while idle, counting and in flight.
flame	string	"oklch(from var(--warn) 0.8 c h)"	The exhaust flame's colour.
sound	boolean	false	Play the countdown ticks, the lift-off, the landing chime and the failure buzz — only for a launch the visitor started.
disabled	boolean	false	Takes the button out of use.
className	string	—	Classes for the outer wrapper.