Hold to Delete

Confirmation modals disrupt flow for simple destructive actions. Hold-to-delete uses asymmetric timing: deliberate 1.5s hold, instant 150ms snap back on release.

Interrupting a user with a "Are you sure?" modal dialog for simple destructive actions breaks flow, requires an extra click, and feels bureaucratic.

Asymmetric Enter and Exit Timing

Hold-to-delete uses asymmetric timing to balance safety with momentum:

  1. –Pressing down (Hold): A deliberate 1.5s linear fill via clip-path: inset(0 X% 0 0) gives the user time to decide.
  2. –Releasing early (Cancel): An instant 150ms ease-out snap back clears the state immediately.

Slow where the user is deciding, fast where the system is responding.

// CSS clip-path transition
const style = {
  transition: isHolding
    ? "clip-path 1500ms linear"
    : "clip-path 150ms cubic-bezier(0.23, 1, 0.32, 1)",
  clipPath: isHolding ? "inset(0 0% 0 0)" : "inset(0 100% 0 0)",
};