SwiftUI animation example
SwiftUI Parallax: Tilting Poster With Depth Layers
Apple TV's focus effect turns flat artwork into a little 3D object: as you move, the poster tilts and its layers slide past each other, with a highlight following the light. This card does the same with four layers, a background, a planet, a title and a foreground ring, each at its own depth.
- 4.3 KB file
- 5 live inputs
- SwiftUI runtime
How this tilt parallax poster works
- Tilt is a spring toward the pointer's offset from the card centre; the card is skewed to fake perspective.
- Each layer moves by tilt × its depth, so near layers travel farther than the background.
- A glare gradient sits on top and moves opposite to the tilt, like light reflecting off glass.
Add it to your SwiftUI app
Install ExodeUI (Swift Package), download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import SwiftUI
import ExodeUI
// Add swiftui-parallax.exode to your app target (download it below).
struct SwiftuiParallaxView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-parallax", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { }
)
.frame(height: 700)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
depth | Number | 1 | 0 – 2 |
title | Text | ORBIT | — |
accent | Text | #f59e0b | hex colour |
accent2 | Text | #7c3aed | hex colour |
bg | Text | #09090b | hex colour |
More SwiftUI animations
Activity Rings LoaderThree concentric arcs chasing each other like Activity rings, closing into full rings with a check when done.Shimmer Reveal TextA headline whose words rise and focus in one by one, with a periodic shimmer across the gradient text.Hold to Confirm ButtonA press-and-hold button: a fill runs while held, drains on early release and confirms when full.Context Menu PopLong-press a card to lift it, dim the background and spring an iOS-style context menu open beside it.Mesh Gradient BackgroundA living mesh-style gradient of drifting color points that bend toward your touch.Spring Response ComparisonThree springs (snappy, smooth, bouncy) racing the same distance so response and bounce are easy to compare.
The same idea in other frameworks: React depth parallax scene · Flutter parallax scroll list · Vue starfield parallax hero