Expanding Card

Summary

A set of UI card components with smooth expand animations where content blurs and fades as the card scales, demonstrated across flight tracker, confirmation dialog, and payment card examples.

Visual description

A very sparse light-grey frame with a single dark, pill-shaped button reading Track my flight centered in the middle. The button has white sans-serif text, fully rounded ends, and nothing else surrounds it, suggesting the collapsed starting state of an expanding card.

Key takeaway

Start the transition from a minimal, high-contrast pill on an empty field so the expansion into a full card has maximum visual contrast and a clear single origin point.

Reuse notes

Reach for this as a motion still reference. Pairs with minimal directions. Original by cz.