SwiftUI animation example
SwiftUI Text Animation: Shimmer and Blur Reveal
iOS uses blur and light more than any other platform, and this headline does both. Words rise and come into focus one at a time, then a soft highlight sweeps across the gradient text every few seconds, like the shine on a premium onboarding screen. Tap it to replay the reveal.
- 4.2 KB file
- 5 live inputs
- SwiftUI runtime
How this shimmer reveal text works
- Each word starts 12 points low, blurred and transparent, and eases to rest with a staggered start.
- The shimmer is a narrow light band moved across the text and clipped to the glyphs.
- Tap replays the reveal and fires "replay".
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-text-animation.exode to your app target (download it below).
struct SwiftuiTextAnimationView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-text-animation", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { },
onTrigger: { name, _ in
// fires: 'replay'
}
)
.frame(height: 420)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
headline | Text | Meet your new favorite app | — |
sub | Text | Designed for iPhone | — |
accent | Text | #a78bfa | hex colour |
accent2 | Text | #f472b6 | hex colour |
bg | Text | #050505 | hex colour |
Events: replay
More SwiftUI animations
Activity Rings LoaderThree concentric arcs chasing each other like Activity rings, closing into full rings with a check when done.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.Tilt Parallax PosterA poster card that tilts toward the pointer while its layers separate in depth under a moving glare.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 scramble text · Flutter wavy typewriter · JavaScript terminal typing effect