Destructive Hold to Confirm
Holding fills the control at an honest rate; letting go early drains it back several times faster.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
/**
* Vibary · Destructive Hold to Confirm
*
* A delete that asks for a second of deliberate pressure instead of a
* second dialog. Holding fills the control at a steady, honest rate;About this pattern
A delete that asks for a second of deliberate pressure instead of a second dialog. The fill runs linear while the control is held, because the only thing it promises is how much longer this will take, and the rate has to be honest about that. The craft is in the release: an abandoned hold drains from wherever it got to at roughly three times the fill rate, eased out so it leaves quickest at the start. That asymmetry is the entire design — committing is slow and abortable, backing out is immediate and unmistakable, so a press made by accident visibly un-happens. The keyboard gets the same contract rather than a tap-equivalent, the label crossfades at one constant size, and the confirmed ground is a second tint layer fading over the first, since a color-mix value can be faded between but never interpolated.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
Holding a button to commit, with the ring emptying again the moment it is released.
Related patterns
- Delete Confirm MorphA delete control widens in place into a question with a way out, instead of opening a dialog.
- Form Submit ProgressSubmit narrows to a turning disc while the request runs, then opens out as the confirmed state.
- Processing Steps CheckThree stages clear across a horizontal rail, each hand-off filling the segment to the next marker.