KQ-1516 · HEAT/HOLD
Heat Hold
A hold-to-confirm button fired like a kiln: holding raises the heat, and one WebGL2 pass paints a front that climbs from the floor with its edge licked into tongues, the colour climbing the ramp from deep red through orange and yellow to white, a haze wavering above it and sparks rising through it, while a masked second copy of the label recolours as the heat passes through it. Let go early and it cools back down, quickest while hottest; reach the top and it fires — a white flare blooms from the middle, a glow spreads around the button and fades, the button kicks on springs.recoil and the kiln cools through the ramp. Space or Enter held heats it, Escape cancels, and a click with no pointer or key behind it fires at once.
Kiln 2 · Batch 14
Cone 6 · 1,222 °C
38 glazed pieces, loaded and vented.
hold to fire · 1.6 s
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/heat-hold
Props
- onConfirm
- () => void
- default —
- Fires once, the moment the heat reaches the top.
- onHeatChange
- (state: "idle" | "heating" | "cooling" | "fired") => void
- default —
- Fires as the button starts heating, starts cooling, fires, and comes back to rest.
- label
- ReactNode
- default "Hold to confirm"
- What the button does; truncates in a narrow button.
- doneLabel
- ReactNode
- default "Confirmed"
- Shown, with a check, once it has fired.
- icon
- ReactNode
- default a flame
- Before the label; 16px, drawn in currentColor.
- hold
- number
- default 1600
- How long a hold takes to bring it to full heat, in ms. Measured in real time, so a busy device fires on time.
- cool
- number
- default 900
- How long a full charge takes to cool back down when let go early, in ms; it cools fastest while hottest.
- shimmer
- number
- default 0.6
- How much the heat wavers, 0 to 1: the tongues on its front, the haze above it and the sparks in it. 0 is a calm level.
- colors
- "kiln" | "forge" | "gas" | string[]
- default "kiln"
- The heat ramp, coldest first: a named ramp (red to white, copper to gold, blue flame to white) or 2 to 4 CSS colours.
- glow
- number
- default 0.7
- How far the glow blooms around the button when it fires, 0 to 1.
- resetAfter
- number
- default 1800
- How long it shows the fired state before it can be held again, in ms; 0 keeps it fired.
- size
- "sm" | "md" | "lg"
- default "md"
- Height 40, 48 or 56px.
- dpr
- number
- default 2
- The highest device pixel ratio the heat is drawn at (0.5 to 2).
- sound
- boolean
- default false
- A sizzle while heating, rising with the heat and stopped on release, and a flare on firing; only in answer to the visitor.
- disabled
- boolean
- default false
- Disables the button and lets any hold go.
- className
- string
- default —
- Classes for the root, which the button fills; set its width here.
| Prop | Type | Default | Description |
|---|---|---|---|
| onConfirm | () => void | — | Fires once, the moment the heat reaches the top. |
| onHeatChange | (state: "idle" | "heating" | "cooling" | "fired") => void | — | Fires as the button starts heating, starts cooling, fires, and comes back to rest. |
| label | ReactNode | "Hold to confirm" | What the button does; truncates in a narrow button. |
| doneLabel | ReactNode | "Confirmed" | Shown, with a check, once it has fired. |
| icon | ReactNode | a flame | Before the label; 16px, drawn in currentColor. |
| hold | number | 1600 | How long a hold takes to bring it to full heat, in ms. Measured in real time, so a busy device fires on time. |
| cool | number | 900 | How long a full charge takes to cool back down when let go early, in ms; it cools fastest while hottest. |
| shimmer | number | 0.6 | How much the heat wavers, 0 to 1: the tongues on its front, the haze above it and the sparks in it. 0 is a calm level. |
| colors | "kiln" | "forge" | "gas" | string[] | "kiln" | The heat ramp, coldest first: a named ramp (red to white, copper to gold, blue flame to white) or 2 to 4 CSS colours. |
| glow | number | 0.7 | How far the glow blooms around the button when it fires, 0 to 1. |
| resetAfter | number | 1800 | How long it shows the fired state before it can be held again, in ms; 0 keeps it fired. |
| size | "sm" | "md" | "lg" | "md" | Height 40, 48 or 56px. |
| dpr | number | 2 | The highest device pixel ratio the heat is drawn at (0.5 to 2). |
| sound | boolean | false | A sizzle while heating, rising with the heat and stopped on release, and a flare on firing; only in answer to the visitor. |
| disabled | boolean | false | Disables the button and lets any hold go. |
| className | string | — | Classes for the root, which the button fills; set its width here. |