Hero Expand Card

Hero Expand Card

An App Store Today-style card that morphs into a full-screen story with matchedGeometryEffect, staggered content and corner-radius morphing. Pull down to shrink it back interactively.

Luiz Mello
  • card
  • transition
  • gesture

snippet.swift407 lines

9 files • Scroll to see all →
/// One story in a `HeroExpandCardFeed`. Artwork is a mesh gradient plus an/// SF Symbol, so the snippet needs no image assets.public struct HeroExpandCardItem: Identifiable {    public let id: String    let eyebrow: String    let title: String    let subtitle: String    let systemImage: String    /// 9 colors for a 3×3 mesh gradient.    let colors: [Color]    let paragraphs: [String]​    public init(        eyebrow: String,        title: String,        subtitle: String,        systemImage: String,        colors: [Color],        paragraphs: [String]    ) {        precondition(colors.count == 9, "HeroExpandCardItem needs 9 colors (3×3 mesh).")        self.id = eyebrow + title        self.eyebrow = eyebrow        self.title = title        self.subtitle = subtitle        self.systemImage = systemImage        self.colors = colors        self.paragraphs = paragraphs    }}
Viewing: Model.swift•1 of 9