mcpField
L
liquid-glass-motion

liquid-glass-motion

github.com/yordilorenzoDesign & UI739 installsUpdated 11w ago
Repository

About liquid-glass-motion

liquid-glass-motion is a companion skill for SwiftUI motion, animation, and shaders involving Liquid Glass. It guides coding agents through implementation constraints and topic-specific references, and includes scripts for recording and analyzing Instruments traces.

Key features

  1. 01Guidance on Liquid Glass animation rules
  2. 02References for motion and transitions
  3. 03Scroll-driven motion guidance
  4. 04Metal shader guidance
  5. 05Reduce Motion accessibility rules
  6. 06Instruments trace recording and analysis

Use cases

  1. 01Implement Liquid Glass morphs
  2. 02Build scroll-driven SwiftUI motion
  3. 03Choose animation and transition approaches
  4. 04Profile animation hitches and SwiftUI performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/yordilorenzo/liquid-glass-skills --skill liquid-glass-motion

After installing, type/liquid-glass-motionin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

ATTRIBUTION.md
references/
animation-fundamentals.md
metal-and-glass.md
morphing.md
performance-and-instrumentation.md
phase-and-keyframe.md
reduce-motion.md
scroll-driven.md
transitions-and-navigation.md
scripts/
analyze_trace.py
LICENSE-AvdLee-SwiftUI-Agent-Skill
record_trace.py
scripts/instruments_parser/
__init__.py
causes.py
correlate.py
events.py
hangs.py
hitches.py
summary.py
swiftui.py
time_profiler.py
xctrace.py
xml_utils.py

Details

From the project README

Liquid Glass — motion, animation, and shaders

Companion to the liquid-glass skill (~/.claude/skills/liquid-glass/). Same tag system: [verified] / [apple] / [multi] / [single] / [version-pinned] — see that skill's SKILL.md. Composed 2026-08 and verified against Apple documentation and SDK interfaces.

Operating rules

  1. Before generating code, ALWAYS read the availability firewall in the companion liquid-glass skill (installed alongside this one): references/availability-and-sdk27.md. Motion code trips the same SDK-27 breakages (.if ban, @ContentBuilder, renames).
  2. Load references on demand via the router — one topic, one file.
  3. The motion model: Liquid Glass and its motion were designed together. Glass does not fade — it materializes by modulating lensing; when glass grows, its material gets thicker (deeper shadow, stronger lensing). Size change is a material change, which is why morphs must be the system animation, never hand-faked.
  4. Verify motion claims against references/ before repeating them — circulating write-ups get several of these facts wrong; the corrected facts live in these files.
  5. Profiling evidence beats reasoning: record an Instruments trace with xctrace before optimizing, and never trust the iOS Simulator for the SwiftUI instrument — see references/performance-and-instrumentation.md.

Hard rules (the short list)

  1. Never animate glass with .opacity / fades — use glassEffectTransition (.materialize is the sanctioned fade-like option). [multi]
  2. Morphing silently no-ops unless ALL four hold: same GlassEffectContainer; glassEffectID per element in one shared @Namespace; the change is view insertion/removal (not a value change); the state change is inside withAnimation. Plus geometry: nearest edges within the container's spacing. [multi]
  3. The interactive "squish" is one boolean — .interactive(). No public spring/damping/ stiffness knobs exist; do not promise tunable jelly. [multi]
  4. Gate every glass animation on accessibilityReduceMotion — the default morph is a kinetic effect, and reduce-motion users have experienced it as flickering. The system does NOT gate your withAnimation for you. [multi]
  5. One animation source per property — never mix implicit .animation, withAnimation, and scroll-driven updates on the same property. Implicit later in the view tree silently wins over explicit. [multi]
  6. The animation context must live OUTSIDE a conditional — an .animation() inside the if is destroyed with the view and removal never animates. [multi]
  7. Prefer renderer-side motion for scroll: scrollTransition / visualEffect(in:) over observable scroll-offset plumbing. [apple]
  8. Animate transforms first (scale/offset/rotation), frames second, identity changes last. [multi]

Topic router

TopicReference
Springs, curves, precedence, Transaction, @Animatable, CA bridgereferences/animation-fundamentals.md
Glass morphing, glassEffectID, union, glassEffectTransitionreferences/morphing.md
Navigation zoom, custom Transition, sheets, touch-vs-trackpadreferences/transitions-and-navigation.md
Scroll-driven motion, scrollTransition, visualEffect, chrome interplayreferences/scroll-driven.md
PhaseAnimator, KeyframeAnimator, symbol effectsreferences/phase-and-keyframe.md
Reduce Motion gating, replacement tablesreferences/reduce-motion.md
Metal shaders with/under/instead-of glassreferences/metal-and-glass.md
Performance model, xctrace profilingreferences/performance-and-instrumentation.md
Static glass, availability, toolbars, platform APIs, a11y of the materialliquid-glass skill
Choosing the actual spring/damping/duration valuesapple-motion-feel skill

Scripts

scripts/record_trace.py and scripts/analyze_trace.py (+ instruments_parser/) — vendored from Antoine van der Lee's SwiftUI-Agent-Skill (MIT; licence ships beside them as scripts/LICENSE-AvdLee-SwiftUI-Agent-Skill). Record and parse Instruments traces (Time Profiler, Hangs, Animation Hitches, SwiftUI lanes) into JSON/markdown. Usage and interpretation: references/performance-and-instrumentation.md.

Comments

Markdown supported