Expandable Detail Card
A compact card that expands in place into a detail view — image and title travel continuously.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Expandable Detail Card
*
* A compact card that expands in place into a detail view. The
* thumbnail and title are shared elements: Motion's layout animationAbout this pattern
List-to-detail without a page change. Tapping the compact card grows it in place: the thumbnail and title keep their identity while the layout reflows around them, and the detail content fades in once the surfaces have settled. Continuity is the point — the user never loses track of what they tapped, which makes this the pattern of choice for galleries, product lists and profile cards.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Photo gallery
The canonical card-to-page expansion: artwork and title stay continuous.
Related patterns
- Gallery Lightbox OpenThe pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.
- Fullscreen ToggleA panel expands to fill the frame while surrounding chrome fades.
- Modal Scale InA dialog grows the last few percent into place behind a darkening scrim, and leaves the same way.