Close
Marvel Card Experiment
A handcrafted Marvel card in SwiftUI with smooth flips and motion-aware depth.
The Concept
Marvel Card Experiment is a UI experiment built entirely in SwiftUI, inspired by Ryan Kopinsky’s video about recreating a Pokémon card using declarative UI. Instead of recreating the same idea, this project takes the concept in a new direction by rebuilding a full Marvel Captain America trading card from scratch, both front and back, using SwiftUI’s drawing and layout tools.
The goal was simple: see how far SwiftUI can go when treated like a pure rendering engine.
Apart from a few character images, every part of the card is constructed using Shapes, Stacks, Lines, Gradients, ZStacks, Colors, and SwiftUI’s built-in layout primitives. The borders, comic-book accents, typography, layered frames, and even the paper-like depth on the back side are all programmatically drawn.
SwiftUI’s image tools made it easy to precisely position character art, align frames, mask edges, and preserve the retro printed-card style. The result is a playful but technically detailed representation of a real trading card.
The card flips between the front and back with a smooth interactive animation, and to push the idea further, the entire card responds to the iPhone’s gyroscope through CoreMotion. This subtle tilt effect adds depth, personality, and physicality, making the card feel like an object rather than a static view.
This experiment highlights just how expressive SwiftUI can be when pushed creatively from building a complete two-sided layout to animating fluid transitions and integrating real-time sensor data.
Breaking it Down
The Front
The front of the card combines classic comic-book design with SwiftUI’s precise layout system.
White outer border - A white rectangle with a soft shadow gives the card structure and the appearance of physical thickness.
Black inner stroke - A thin black stroke frame created using a Rectangle().stroke() mirrors the layering of printed cards.
Red comic border - A bright red background rectangle establishes the Marvel visual identity and anchors the layout.
Flag backdrop - A resizable, precisely framed image that sits behind the character, scaled to preserve texture.
Captain America artwork - Placed with clarity using SwiftUI’s resizable image system and layered with ZStacks for depth.
Typographic header - The “SUPER HEROES” banner is built using Text, custom padding, and an icon aligned with a HStack.
Diagonal name banner - A yellow rotated rectangle with a border and heavy text, placed at a dynamic angle to echo retro trading cards.
Every element on the front is built from SwiftUI primitives that align predictably no matter the device size or resolution.
The Back
The back is where SwiftUI’s composability shines. It recreates the dense informational layout of classic cards using nothing but layout stacks, rectangles, strokes, and precise spacing.
Vintage paper texture - Achieved with warm RGB values and stacked rectangles to mimic old printed cardstock.
Top title band - A bold accent color with centered text and the Marvel Comics logo.
Stats section - Built using HStacks and VStacks, with small typography, grouped labels, and careful alignment.
Character portrait frame - Three layered rectangles create a printed “inset” style layout before embedding the face asset.
Story paragraph card - A separate rounded rectangle with multiple shadows to create depth, containing multiline text that scales gracefully.
Trivia box - A bordered rectangle with small dense text, styled to replicate the bottom info card of classic trading cards.
Everything is aligned using SwiftUI’s layout system, making the back side responsive, legible, and visually authentic.
Flip Animation
The flip interaction is driven entirely by rotation3DEffect, with a coordinated opacity swap between the front and back views.
How it works:
a. When tapped, a state variable toggles showingBack.
b. Each side rotates around the Y-axis.
c. At the halfway point (90°), opacity swaps to reveal the opposite face.
d. A perspective: 0.6 value adds natural depth.
e. An ease-in-out animation of 0.5 seconds keeps the flip smooth and direct.
f. Haptic feedback (UIImpactFeedbackGenerator) adds physical confirmation.
This creates a flip that feels lightweight and almost toy-like, exactly what you’d expect from a trading card.
Motion Response
To push the experiment further, CoreMotion is used to bind the card’s orientation to the device’s gyroscope.
Implementation:
a. A custom MotionManager listens to roll and pitch.
b. Values are clamped and smoothed.
c. Two rotation3DEffect modifiers tilt the card along both axes.
d. The motion updates at 60 FPS, keeping tilt responsive but stable.
The result is a card that subtly leans as the user tilts their phone.
It adds personality, depth, and a sense that the card exists in space, not just on screen.
A Word of Appreciation for SwiftUI
Could you build this without SwiftUI? Yes.
Would it be this quick, this fun, or this flexible? Probably not.
SwiftUI makes drawing and composing interfaces feel natural. You describe what you want and SwiftUI builds it for you. You can layer shapes, rotate views, compose complex layouts, and experiment freely.
The seamless integration with other Apple frameworks and technologies frameworks like CoreMotion makes it even more powerful. The entire card was built in SwiftUI, and the gyroscope interaction was added with almost no friction.
Experiments like this show how approachable and expressive SwiftUI can be, making even non-traditional UI feel possible and enjoyable to create.
Try it yourself
You can explore this project yourself by running it from the source.