App Store Today Tab Expanding Card UI in SwiftUI

Want to recreate the App Store Today tab card that expands into a full screen? The short answer: it is a hero transition, a shared element that morphs from card to detail, and SwiftUI gives you the tools to nail it. Build the card and detail from a free VP0 design, the free iOS design library for AI builders, then wire the transition. Continuity, the same element morphing rather than a cut, is the whole magic. The stakes are real: Apple rejected more than 1.7 million app submissions in 2023, over 248,000 of them for spam or copycat behavior.

Who this is for

This is for SwiftUI developers who want that signature polished iOS feel, a card smoothly expanding into a detail, and want to know exactly how it is done.

What makes the effect work

The Today tab effect is not two screens swapping; it is one element growing. The card and the full-screen detail share a visual identity, image, corner radius, position, and the transition morphs between them so the eye follows a single object expanding. Break that continuity and it feels like a jump cut. SwiftUI offers two routes: matchedGeometryEffect, which links elements across states, and the newer zoom navigation transition for card-to-detail pushes. The matchedGeometryEffect documentation covers the shared-element approach, the navigationTransition zoom covers the simpler push, and the HIG motion guidance covers making it feel right.

Piece	Job	Get it right
Shared element	Morph card to detail	Same image, radius, position
Transition driver	Animate the change	matchedGeometryEffect or zoom
Card state	The collapsed view	Feed-friendly, tappable
Detail state	The expanded view	Full screen, scrollable
Dismiss	Reverse smoothly	Morph back, not a cut

Build it free with a VP0 design

Build the two states from a VP0 design, then connect them with a transition. Pick a card or feed screen, copy its link, and prompt your AI builder:

Build a SwiftUI card and full-screen detail from this design: [paste VP0 link]. Use a zoom navigation transition (or matchedGeometryEffect) so the card morphs smoothly into the detail and back, sharing the image and corner radius. Match the palette and spacing from the reference, and generate clean code.

For related polish and SwiftUI patterns, see an iOS 26 Liquid Glass UI template, a confetti cannon SwiftUI package, how to design an iOS app before you build it, and how to make an AI app look native on iOS.

Nail the details

The effect lives or dies on matching. Keep the corner radius identical between card and detail so it does not pop, share the exact image so it does not flicker, and make the dismiss reverse the same morph rather than a plain slide-down. Keep the animation quick and natural, motion that lingers feels sluggish. Build the card and detail to look right first, then layer the transition on, and test the expand and dismiss repeatedly until the single-object illusion holds. When it does, the screen feels unmistakably like first-party iOS.

Common mistakes

The first mistake is two views swapping instead of one element morphing. The second is a corner radius or image mismatch that pops or flickers. The third is a dismiss that does not reverse the morph. The fourth is an animation that lingers too long. The fifth is paying for an animation kit when SwiftUI plus a free VP0 design does it.

Key takeaways

• The Today tab card is a hero transition: one element morphing card to detail.
• Use matchedGeometryEffect or the zoom navigation transition in SwiftUI.
• Match image, corner radius, and position between states for continuity.
• VP0 gives you the card and detail UI free, ready to build with Claude Code or Cursor.
• Make the dismiss reverse the same morph, and keep it quick.

Frequently asked questions

How do I build the App Store Today tab expanding card in SwiftUI? Use a hero transition with a shared element that morphs between the card and detail, via matchedGeometryEffect or the zoom navigation transition, built from a free VP0 design.

What is the best free template for an expanding card UI? VP0, the free iOS design library for AI builders, lets you clone a card or feed screen into an AI tool that generates clean SwiftUI, then you add the transition.

What makes the Today tab transition feel so smooth? Continuity: the same element morphs from card to full screen rather than one view replacing another. Matching radius, image, and position sells it.

Is matchedGeometryEffect or the zoom transition better? Both work. The zoom transition is simpler for a card-to-detail push; matchedGeometryEffect gives finer control over which elements morph.