Delete Confirm Morph
A delete control widens in place into a question with a way out, instead of opening a dialog.
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, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Delete Confirm Morph
*
* A destructive button that asks in place: the control widens out of
* itself into "Delete this report?" with a way back, then narrows intoAbout this pattern
A confirmation that keeps the user where they were. The control opens out of itself into a question and a pair of answers, then narrows into a settled state — the row it belongs to never leaves the screen, so there is no context to rebuild afterwards. Only the shell animates its box; every child is marked position-only, which is what stops the words from smearing sideways as the width opens. The shell changes color by fading tints over it rather than tweening a background, because mixed colors cannot be interpolated and an opacity crossfade stays on the compositor. The way out is always the closer of the two answers.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
A confirming state opens out of the first control instead of replacing the screen.
Related patterns
- Destructive Hold to ConfirmHolding fills the control at an honest rate; letting go early drains it back several times faster.
- Form Submit ProgressSubmit narrows to a turning disc while the request runs, then opens out as the confirmed state.
- Error Retry NudgeA failed action answers with one short damped nudge and becomes its own retry.