KQ-1105 · FUSE/BUTTON

Fuse Button

A hold-to-confirm button whose own border is a fuse: holding lights it at the top centre and a spark runs clockwise round the button's edge, leaving a charred thread with a short stretch still glowing behind it, while the face presses in on the flick spring. Letting go pauses it where it is, with the burnt part kept and the spark dimmed to a smouldering ember; completing the lap flares the whole edge, lands the face on the recoil spring and fires onConfirm, and Escape puts a lit fuse out as the char draws back on the glide spring. It is a native button: Space or Enter held burns it exactly as a held pointer does.

KQ-1105 · FUSE/BUTTON

Release 4.2.0 to production

Gaugeworks · 18 changes

hold to deploy · the fuse is 2 s

Open it on the Tactile stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/fuse-button

Props

label: string; default —; What holding it does: the button's text and accessible name.
onConfirm: () => void; default —; Fires once, on the frame the spark completes its last lap.
onStateChange: (state: "idle" | "burning" | "paused" | "fired", progress: number) => void; default —; Each change of state, with the share of the fuse burnt from 0 to 1. Never called per frame.
laps: number; default 1; How many times the spark goes round, 1 or 2. Two laps draw a second, inner strand and take twice as long.
burn: number; default 2; Seconds per lap.
spark: number; default 0.6; How fierce the spark is, 0 to 1: its glow and core, how many embers fly and how far, and how loud the sizzle and crackle are.
smoke: boolean; default true; Smoke curls up off the burning spark, behind the button's face.
sound: boolean; default false; Play the sizzle while it burns, its crackle, and the flare when it fires. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims and disables the button and pauses a burning fuse.
className: string; default —; Merged onto the root's classes (the button and the frame its sparks stay inside).

Prop	Type	Default	Description
label	string	—	What holding it does: the button's text and accessible name.
onConfirm	() => void	—	Fires once, on the frame the spark completes its last lap.
onStateChange	(state: "idle" \| "burning" \| "paused" \| "fired", progress: number) => void	—	Each change of state, with the share of the fuse burnt from 0 to 1. Never called per frame.
laps	number	1	How many times the spark goes round, 1 or 2. Two laps draw a second, inner strand and take twice as long.
burn	number	2	Seconds per lap.
spark	number	0.6	How fierce the spark is, 0 to 1: its glow and core, how many embers fly and how far, and how loud the sizzle and crackle are.
smoke	boolean	true	Smoke curls up off the burning spark, behind the button's face.
sound	boolean	false	Play the sizzle while it burns, its crackle, and the flare when it fires. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims and disables the button and pauses a burning fuse.
className	string	—	Merged onto the root's classes (the button and the frame its sparks stay inside).