SwiftUI animated backgrounds
Quiet, full-bleed atmospheres: a Metal silk shader lit by a movable light, and a Canvas dot grid that reacts to touch.
About these pieces
One self-contained Swift file each, Apple frameworks only, from iOS 17.
A background should hold still enough to read over and move enough to feel alive. Silk is a slowly folding surface shaded from a real gradient normal in a Metal shader, with house fabrics, an adaptive standard style and optional device-tilt lighting. It ships as a .swift file and a .metal file; the shader compiles into your app's default library, so there is nothing to configure.
Touch Grid is drawn with Canvas: dots swell and warm into a color under the finger, spring back on release, and a tap sends out one dissipating ripple.
Learn the technique: SwiftUI animations guide.
Questions
How the pieces work, and how to build the same thing yourself. Every piece's page has its full notes.
How do I use a Metal shader as a SwiftUI background?
Add the .metal file to your app target so it compiles into the default Metal library, then apply it with colorEffect, distortionEffect or layerEffect through ShaderLibrary, driven by a TimelineView for time. Silk ships both files ready to drop in.
Do animated backgrounds drain battery?
Continuous animation costs GPU time, so keep shaders simple, pause them when the view is off screen or the scene is inactive, and respect Reduce Motion. Both backgrounds here are built to stay light.
Keep browsing
Nearby collections, then every category in the library.
- AnimationsSprings, gesture physics, transitions and morphs, across every category.16
- Liquid GlassCorrect iOS 26 Liquid Glass with Material fallbacks.3
- TextType that reveals, expands and renders as glass.3
- Buttons and controlsButtons and dials with press depth, hold, drag and outcome states.5
- Inputs and formsTracks, steppers, rails and fields built for the thumb.9
- CardsCards with depth, motion, parallax and gesture-driven stacks.4
- ListsRows and carousels with swipe, depth and completion physics.5
- NavigationFloating docks, tracking tabs and stretchy headers.3
- SheetsToasts, confirmations and permission moments.3
- FeedbackReactions, ratings, status morphs, skeletons and outcomes.5
- MotionGesture modifiers with real physics.1
- Data and chartsScrubbable charts, rings, live stats and odometers.4
- AIStreaming replies, thinking states, prompt chips and code.6
- MediaPhoto viewing and story playback.2
- HapticsPieces that tick, tap and confirm at the moment that matters.19
Ready to build something better?
55 pieces, one file each, yours to keep. Start with the library or see what the whole app looks like.