Deleted Item Tombstone
A removed row leaves a stub holding its slot open, with a hairline showing how long undo is on offer.
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, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Deleted Item Tombstone
*
* Deletion in two steps, so the second one can be refused. The row is
* replaced in place by a stub carrying the undo, and the slot keeps itsAbout this pattern
Deletion in two steps, so the second one can be refused. The row crossfades into a stub carrying the undo, and the slot keeps its exact height — nothing below shifts while the offer stands, which means the reader's eye stays where the change happened. A hairline runs down the base of the stub to show how long that remains true, and only when it expires does the slot collapse and the list close the gap on an eased curve. Undo inside the window restores the row in place. No springs: a list that overshoots while closing a gap looks unstable at exactly the wrong moment.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
A removed conversation offers an undo for a short window before the list settles.
Related patterns
- Offline Cached OnlyWhen the network drops, downloaded rows stay crisp while the rest dim in a wave down the list.
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- Chart No DataThe axes extend from the origin and a flat dashed baseline runs across, so an empty range still looks like a chart.