SwiftUI animation example
SwiftUI Animated Gradient: Living Mesh Background
A slowly moving mesh gradient is the backdrop of many modern iOS screens. This one is made of large, soft color points that drift on their own orbits and blend into each other, so the gradient never repeats. Touch or hover pulls the nearest color toward the pointer, which makes the background feel alive.
- 4.2 KB file
- 6 live inputs
- SwiftUI runtime
How this mesh gradient background works
- Five color points move on independent Lissajous paths; each is drawn as a large radial gradient.
- The nearest point is attracted to the pointer with a spring and returns to its orbit when released.
- Speed and the five colors are inputs, so it can follow your brand palette or the time of day.
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-gradient-animation.exode to your app target (download it below).
struct SwiftuiGradientAnimationView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-gradient-animation", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { }
)
.frame(height: 760)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
speed | Number | 1 | 0.1 – 3 |
title | Text | Good evening | — |
accent | Text | #ff2d55 | hex colour |
accent2 | Text | #5856d6 | hex colour |
accent3 | Text | #ff9500 | hex colour |
bg | Text | #0a0a1a | 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.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 depth parallax scene · React layered wave background · Flutter liquid wave header