A SwiftUI motion reference and runnable interactive playground — every motion API on iOS 17 → 26, with sliders to tune the physics yourself.
Built while designing the visual language for an iOS 26 podcast app.
12 chapters, ~78 #Preview blocks, all type-checked on iOS 17 + iOS 26.
📖 Browse the reference online →
MotionPlayground.swiftpm/ — Xcode-openable Swift package, 78 #Preview blocks
topics/*.md — 12 deep reference chapters (Chinese)
index.html — Standalone HTML version of the reference
| # | Chapter | Highlights |
|---|---|---|
| 1 | Animation basics + Spring | withAnimation · Animation types · Spring tuner with response / bounce sliders |
| 2 | Custom animations | Animatable · KeyframeAnimator heart-beat · PhaseAnimator toast · GeometryEffect shake |
| 3 | Transitions + matchedGeometry | 6-way transition picker · hero animation with @Namespace · custom Transition protocol |
| 4 | Gestures | Swipe-to-dismiss with velocity → interactiveSpring · pinch + pan + rotate |
| 5 | CoreMotion + Haptics | Tilt parallax (slider fallback for sim) · CHHapticPattern charge-up ramp |
| 6 | Metal / Shader | Ripple distortion · chromatic aberration · film grain · 4 [[stitchable]] MSL functions |
| 7 | Canvas + TimelineView | Fireworks particles · audio waveform · filter playground |
| 8 | ScrollView effects | 3D carousel · parallax header · scroll-driven blur nav (iOS 18 onScrollGeometryChange) |
| 9 | Symbol & Content Transitions | Effect picker (7 cases) · numericText badge · iOS 18 .breathe / .wiggle |
| 10 | iOS 26 Liquid Glass | GlassEffectContainer metaball merge · glassEffectID morph |
| 11 | Custom Layout | Full FlowLayout + RadialLayout implementations · AnyLayout spring switch |
| 12 | Performance | frame vs scaleEffect · @ObservedObject vs @Observable · drawingGroup / compositingGroup / geometryGroup |
Each chapter ships two artifacts: a reference doc (in topics/) and a runnable Playground file (in MotionPlayground.swiftpm/Sources/MotionPlayground/).
git clone https://github.com/musepy/motion-playground.git
cd motion-playground
open MotionPlayground.swiftpm/Package.swiftIn Xcode 26:
- Open any
Sources/MotionPlayground/Chapter*.swift - ⌥⌘P — Canvas shows the live
#Preview - Sliders / Pickers in the example let you tune parameters live (spring
response/bounce, shader strength, gesturevelocity, etc.) — no rebuild needed
Or run the whole thing as an app to navigate all 12 chapters in one place — open ContentView.swift and run on the iOS 26 simulator.
- Apple Silicon Mac required for the Metal shader chapter (Intel sim software-rasterizes and may black-screen on
layerEffect). swift buildfrom CLI will report macOS-only errors for many SwiftUI APIs — this is a SwiftPM quirk; opening in Xcode and targeting iOS works cleanly.- CoreMotion + CoreHaptics examples use Slider fallbacks in simulator (no real sensor data); the real interaction lives on device.
- iOS 26 Liquid Glass chapter wraps every example in
if #available(iOS 26.0, *); older simulators show a fallback message.
The whole reference was generated by 12 research sub-agents running in parallel, one per chapter. I orchestrated and stitched. Same workflow for the 78 #Preview blocks. Process notes are in topics/.
MIT. Fork it, adapt it, steal the patterns. Attribution appreciated, not required.
Made by pengxu · Find me on Figma or muse40007@gmail.com