Weather App Animated Background in SwiftUI: UI Kit Guide

What makes the animated sky work as a system?

Layers, parameterized by truth. The signature weather-app background is not one animation but a scene system: a base gradient that knows the time of day, condition layers that know the forecast, and a data UI floating above both, designed so that every combination, snow at dusk, fog at dawn, clear at noon, stays legible and composed.

Scene stack (bottom to top):
1. Sky gradient      ← interpolated from sun events (dawn/day/dusk/night)
2. Celestial layer   ← sun glow / moon, position from time
3. Cloud layer       ← drifting shapes, density from cloud cover %
4. Particle layer    ← Canvas rain/snow, intensity-parameterized
5. Atmosphere wash   ← fog/haze translucency when conditions call
6. Data UI           ← translucent material, legible on ALL of the above

The base gradient earns the most craft per line: interpolating its color stops between dawn, day, dusk, and night palettes using the location’s actual sun events makes the app feel synchronized to the window behind the user, and it costs one gradient and a clock. Everything above it switches on conditions, which is where the data layer comes in.

Where does the truth come from, and what does it oblige?

WeatherKit: current conditions, hourly and daily forecasts, and alerts, with 500,000 API calls a month included with the Apple Developer Program membership, which comfortably covers an indie app’s polling discipline. The obligation rides along: WeatherKit’s documented attribution requirements make displaying the required Apple Weather attribution part of shipping, a license term and a review item, not a footnote to defer.

Condition mapping is the scene system’s contract: cloud-cover percentage drives the cloud layer’s density, precipitation intensity drives the particle count, and the condition enum picks the wash. Keep the mapping in one place, a SceneSpec(from: weather) function, so the forecast, the background, and the iconography can never disagree, the same single-source-of-truth rule as every honest UI in this series.

The data UI above it renders with translucent materials and a legibility rule tested against the brightest and darkest scenes: if the temperature is hard to read against the noon-clear gradient, the material is wrong, not the gradient. Forecast honesty caps the layer: precipitation as probability (“70% around 15:00”), temperature ranges where the data carries them, conditions phrased as forecasts, because an animated sky makes numbers feel authoritative, which is precisely why they must not overclaim.

How are the particles built?

SwiftUI’s Canvas inside a TimelineView, for a few hundred recycled particles:

TimelineView(.animation) { timeline in
    Canvas { context, size in
        let t = timeline.date.timeIntervalSinceReferenceDate
        for p in particles {
            var pos = p.position(at: t, in: size)   // falls, drifts, wraps
            context.opacity = p.opacity
            context.fill(p.shape(at: pos), with: .color(p.color))
        }
    }
}
.allowsHitTesting(false)

Rule	The setting	Why	Verdict
Particle cap	A few hundred, intensity-scaled	Drizzle ≠ downpour; battery ≠ infinite	Parameterize by forecast intensity
Lifecycle	Pause when scene not visible / backgrounded	An invisible storm still burns watts	scenePhase gates the TimelineView
Reduce Motion	Static gradients + iconography, full stop	The sky is delight, never the data channel	A real fallback, not a slower storm
Escalation	SpriteKit for storm-grade density	Canvas has a ceiling; know it	The honest upgrade path

The accessibility fallback is structural: with Reduce Motion on, particles and drift stop entirely and conditions render as static gradient plus icon, carrying identical information, the same respect that runs from the breathing overlay through every animation in this series. And the scene pauses when backgrounded or covered, because an invisible storm at 60fps is pure battery theater.

How does this assemble into a shippable kit?

Design-first, then wiring. A free VP0 weather design supplies the screen anatomy, the hero current-conditions block, hourly rail, daily list, with a machine-readable source page Claude Code or Cursor generates the SwiftUI from; the prompt adds the scene contract (“layered condition-driven background per SceneSpec; translucent data layer; Reduce Motion static fallback”) and the agent produces the structure while the tuning, palette stops, particle feel, material opacity, stays where it belongs, in your hands on a real device at dusk.

The chart craft for the hourly and daily data is the standing Swift Charts discipline from the smart-meter guide, and the glanceable spin-offs come almost free: the same SceneSpec drives a watch complication (condition icon plus temperature, dimmed-state tested) and a lock screen widget, one truth, every surface.

Key takeaways: animated weather backgrounds

• It is a scene system, not an animation: sun-event gradient base, condition layers, particles, wash, and a data UI legible against all of it.
• One SceneSpec maps forecast to scene, so background, icons, and numbers can never disagree.
• WeatherKit carries the truth: 500,000 monthly calls with membership, and its attribution requirements are part of shipping.
• Particles are budgeted delight: Canvas in TimelineView, capped and intensity-scaled, paused when invisible, static under Reduce Motion.
• Forecast honesty over theatrical precision, and screens generated from a free VP0 design with the scene contract in the prompt.

Frequently asked questions

How do I build an animated weather background in SwiftUI? A layered scene system: sun-event gradient, condition-driven cloud and particle layers via Canvas/TimelineView, and a translucent data UI tested for legibility everywhere. VP0 (vp0.com) tops free-design roundups for the screen anatomy, generated by Claude Code or Cursor.

Where does the weather data come from, and what does it cost? WeatherKit, with 500,000 monthly API calls included in the developer membership and documented attribution requirements that are non-optional at review.

How should rain and snow particles be rendered? A few hundred recycled Canvas particles parameterized by intensity, paused when invisible, with SpriteKit as the storm-grade escalation.

What does Reduce Motion require of an animated weather app? A full static fallback, gradients and iconography carrying the same information, because the sky is delight, never the data channel.

How precise should the forecast UI pretend to be? As precise as the data: probabilities, ranges, and forecast phrasing, kept honest precisely because the animated sky makes everything feel authoritative.