Screen · Travel

Discover SwiftUI Screen

A travel discover feed of story cards that expand into full-screen guides and pull back.

A Discover feed for a travel app: a serif headline, destination story cards over drawn scenery, each expanding into a full-screen guide with matched image, title and surface, inner scroll, and pull-to-collapse where radius and scale follow the finger to a haptic commit.

  • SwiftUI
  • iOS 17.0+
  • hero-expand
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A travel discover feed with story cards over scenery
  • Matched image, title and surface into a full-screen guide
  • Pull to collapse, with radius and scale following the finger
  • HeroExpandCard for your own feeds

In the Build Kit

Editorial (style), Travel (brief). Your agent builds around this screen in the same design.

Used in

Travel App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

HeroExpandCard starts as a tall card with a hero image, an eyebrow and a title. Touch-down scales it to 0.965; tap and it expands into a full-screen detail where the image, title and surface share matchedGeometryEffect ids, the corner radius opens to the screen edge and the body scrolls beneath the header. When the detail is scrolled to its top, pulling down makes the whole surface follow: it shrinks and rounds with the drag progress, a rigid haptic marks the commit point, and releasing past it collapses back into the card.

Notes

  • States: rest, pressed, expanding, expanded, pulling (progress 0–1), armed at the commit point. The close button fades out as the pull progresses.
  • The pull only engages when the inner scroll is at its top, read from a geometry probe in the detail's named coordinate space; otherwise the drag scrolls the content. Release commits when the pull reached 1 or predictedEndTranslation projects past 1.4x the commit distance.
  • The card and the detail render in the same place in the view tree (the card slot is kept at the card's height while expanded), which is what makes the matched geometry transition read as one surface.
  • Press feel uses an infinite onLongPressGesture for onPressingChanged with a 12pt maximum distance, and a simultaneous tap for the open.
  • The card is a VoiceOver button; the detail is modal with an escape action. Reduce Motion replaces the springs with short ease-in-outs.
  • The Discover screen puts the cover story card at the top edge, full width, so the expanded guide opens to the screen edges; the headline, filters, destination rail and escapes sit below it over a floating tab bar.
  • The guide is the card's detail: the trip's facts as blocks, a numbered route and a plan action, all scrolling inside the expanded surface.
  • HeroExpandExample at the end of HeroExpandCard.swift is the Discover screen from the preview.