ns-ui / confirm-slide-shatter
Destruction is the progress bar
Pull the thumb and the pane fractures under your finger. Let go early and the glass heals. Reach the end and it shatters.
SLIDE TO DELETE WORKSPACE
DELETE WORKSPACE
ns-ui
Frosted-glass confirm slider where drag distance drives Voronoi crack density — release early and the cracks heal on a spring; complete the travel and the pane explodes into tumbling glass shards revealing the confirmed state.
Use when a frosted-glass CONFIRM slider — drag distance grows Voronoi cracks that heal if you stop early, and shatter into glass shards on full travel; use for a destructive confirm action, not a plain value-reading input; pick confirm-hold-ink instead when the gate should be time held rather than distance dragged, confirm-dial-align when it should be rotational accuracy, or slider-loupe when the drag is setting a value rather than gating an action.
Install
npx shadcn add https://design.helpmarq.comns-ui / confirm-slide-shatter
Pull the thumb and the pane fractures under your finger. Let go early and the glass heals. Reach the end and it shatters.
SLIDE TO DELETE WORKSPACE
| Prop | Type | Default | Description |
|---|---|---|---|
| label? | string | "SLIDE TO CONFIRM" | mono label etched on the glass |
| confirmedLabel? | string | "CONFIRMED" | label revealed once the pane shatters |
| width? | number | 320 | — |
| height? | number | 56 | — |
| shardCount? | number | 48 | approximate Voronoi cell count — cracks while dragging, shards on commit |
| onConfirm? | () => void | — | — |
| resetKey? | number | 0 | bump to restore the pane and replay |
| className? | string | — | — |