KQ-1511 · SLIDE/SEAL

Slide Seal

A slide-to-confirm strip whose handle is a seal stamp: it follows the finger 1:1 along the track and rubber-bands past the ends while the track's words dissolve letter by letter under it, and near the end a wax seal forms on the mark, growing from a dot to just wider than the handle as it closes on the threshold. Released past the threshold (or flicked so the throw would land past it) the handle slams onto the wax on springs.flick with the release velocity and presses it — squashing on springs.flick, the wax splatting out past its rim on springs.recoil — and its face becomes the seal with the monogram pressed in; released short, it springs home on springs.glide with the release velocity. The handle is a native button: Enter or Space runs the whole slide and presses the seal.

KQ-1511 · SLIDE/SEAL

Offer · Coldbrook

Ref 1511

Field engineer

Starts 3 Nov · Ridge office

open · slide to seal

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/slide-seal

Props

label: string; default "Slide to seal"; The track's words and the handle's accessible name.
sealedLabel: string; default "Sealed"; Shown once sealed, and the handle's name then.
sealed / defaultSealed: boolean; default — / false; Whether it is sealed, controlled or initial. Setting it back to false breaks the seal and the handle glides home; a host that refuses the seal gets its own state back.
onSealedChange: (sealed: boolean) => void; default —; Fires with true from the release or key that sealed it.
onConfirm: () => void; default —; Called once, when the seal is pressed.
onProgressChange: (progress: number) => void; default —; Fires while the handle is dragged with how far along the track it is, 0 to 1 (two decimals); 0 when it springs back, 1 when sealed.
threshold: number; default 0.85; Where a release commits, as a share of the travel (0.5 to 0.98); also where the wax finishes forming and the track's mark sits.
seal: "crimson" | "forest" | "cobalt" | "amber" | string; default "crimson"; The wax: a named pigment from the theme's hues at a fixed lightness, or any CSS colour.
monogram: string; default ""; One or two letters pressed into the wax; a check when empty.
icon: ReactNode; default —; The handle's icon before it is pressed. Defaults to a stamp.
wobble: number; default 0.5; How organic the wax's edge is, from a coin (0) to a splash (1).
squash: number; default 0.5; How deep the press squashes the handle and how far the wax spreads, 0 to 1.
size: "sm" | "md" | "lg"; default "md"; Track height 48, 56 or 64px with a matching handle; the strip is w-full up to 420px.
sound: boolean; default false; A thock when the seal is pressed, pitched by size; only after the visitor's drag or key.
disabled: boolean; default false; Disables the handle.
className: string; default —; Classes for the root, which keeps 6px round the track for the wax's overhang (pass -m-1.5 to align the track itself).

Prop	Type	Default	Description
label	string	"Slide to seal"	The track's words and the handle's accessible name.
sealedLabel	string	"Sealed"	Shown once sealed, and the handle's name then.
sealed / defaultSealed	boolean	— / false	Whether it is sealed, controlled or initial. Setting it back to false breaks the seal and the handle glides home; a host that refuses the seal gets its own state back.
onSealedChange	(sealed: boolean) => void	—	Fires with true from the release or key that sealed it.
onConfirm	() => void	—	Called once, when the seal is pressed.
onProgressChange	(progress: number) => void	—	Fires while the handle is dragged with how far along the track it is, 0 to 1 (two decimals); 0 when it springs back, 1 when sealed.
threshold	number	0.85	Where a release commits, as a share of the travel (0.5 to 0.98); also where the wax finishes forming and the track's mark sits.
seal	"crimson" \| "forest" \| "cobalt" \| "amber" \| string	"crimson"	The wax: a named pigment from the theme's hues at a fixed lightness, or any CSS colour.
monogram	string	""	One or two letters pressed into the wax; a check when empty.
icon	ReactNode	—	The handle's icon before it is pressed. Defaults to a stamp.
wobble	number	0.5	How organic the wax's edge is, from a coin (0) to a splash (1).
squash	number	0.5	How deep the press squashes the handle and how far the wax spreads, 0 to 1.
size	"sm" \| "md" \| "lg"	"md"	Track height 48, 56 or 64px with a matching handle; the strip is w-full up to 420px.
sound	boolean	false	A thock when the seal is pressed, pitched by size; only after the visitor's drag or key.
disabled	boolean	false	Disables the handle.
className	string	—	Classes for the root, which keeps 6px round the track for the wax's overhang (pass -m-1.5 to align the track itself).