Detail Close Return
Closing a detail view returns the tile to the exact row it came from.
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, useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Detail Close Return
*
* The half of a list-to-detail transition that usually gets dropped.
* Opening is easy; closing is where an app either puts you back where youAbout this pattern
Opening a detail is the easy half. Closing is where an app either puts you back where you were or drops you at the top of a feed you now have to re-find, and this pattern is about the second half of that journey. Three decisions carry it: the row keeps an empty seat while its tile is away, so the return is a landing rather than an arrival out of nowhere; the travelling tile and title live on their own layer above the detail sheet, mounted by plain state instead of by AnimatePresence, so closing hands the layout ids straight back to the row and nothing in the dissolving sheet can hold the tile hostage or fade it mid-flight; and the destination row is raised for exactly as long as the trip takes. The title is carried with layout="position" at one constant font size in both places — it moves, it is never resized.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Photo gallery
Dismissing a photo shrinks it back into the exact thumbnail it was opened from.
Related patterns
- Expandable Detail CardA compact card that expands in place into a detail view — image and title travel continuously.
- Tab Indicator SlideThe active-tab underline travels to the tab you picked instead of blinking out and back.
- Swipe Back PeelAn edge drag peels the top page away under your finger and snaps to whichever side the gesture was heading for.