All studies10 / 74
Navigation
Case study morph
A case study card that grows into the full study, its picture, name and type each travelling to their new place, then folds back into its tile.
Where it earns its place
Work grids and product galleries where leaving the page would break the browse: the detail opens in place and returns you exactly where you were.
What we changed
- Contained to its own stage instead of portalled to the page body, and no longer locks page scroll: it can sit in a section without taking over the document.
- Escape and the focus trap listen on the dialog itself rather than on document; focus moves to the close button on open and back to the card on close.
- New content (summary, metric, week-by-week timeline, stack) fades in after the frame has mostly grown and leaves first, so nothing squashes inside the moving box.
- Reduced motion uses framer's user setting: the morph becomes an instant swap while the backdrop still fades.
- Kept the insight: one layoutId per shared part (frame, picture, title, type) on one spring, which is what makes it read as a single object changing shape.