ns-ui / loud
Press-and-hold confirm as a molten wax seal — holding pours a wobbling gooey blob of deep crimson wax onto the document line, hold-complete drops a signet stamp that squashes it into a scalloped, monogrammed seal that cools, darkens and micro-cracks over 2s, while early release slumps the blob and drains it back.
Use when a press-and-hold confirm that should read as signing rather than deleting, staged on a document rule and leaving a cooling, micro-cracking seal behind as a persistent artifact of the commitment; it runs confirm-hold-ink's exact hold grammar, so pick confirm-hold-ink instead whenever the confirm is a bare inline button with no document context and no artifact worth leaving behind, and signature-consent when an actual drawn signature is required rather than a hold.
Install
npx shadcn add https://design.helpmarq.comns-ui / confirm-hold-wax
Press and hold Seal to pour wax. Release early and the blob slumps back; hold to the end and the signet stamps it, the wax cools, and the seal is permanent.
| Prop | Type | Default | Description |
|---|---|---|---|
| holdMs? | number | — | Hold duration required to complete the seal, in ms. Default 1100. |
| demo? | boolean | — | Self-driving mode for automated previews: runs a scripted timeline through the same internal hold/release functions the real pointer and keyboard handlers use — two short early-release holds (slump) in the first seconds, then one full hold that seals permanently. Scripted steps yield to any real interaction in progress. |
| onSealed? | () => void | — | Called once when the terminal sealed state is reached. |
| className? | string | — | — |