/swiftui-microinteractions

name: swiftui-microinteractions
description: Generate premium SwiftUI animations in the legendary-Animo style — spring physics, CoreHaptics, glass morphism, SF Symbols 7 draw animations, complete compilable files.

Generate a complete, compilable SwiftUI animation file in the legendary-Animo style. No placeholders. No TODO comments.

When to Use

• Building a SwiftUI button, gesture, slider, or liquid effect with premium physics
• Need haptic feedback timed correctly to animation phases
• Creating a drag interaction with resistance, snap, or threshold trigger
• Animating SF Symbols with draw-on, breathe, bounce, replace, or variable color effects (iOS 17–26)
• Building a Canvas loader that traces a shape outline with a comet trail (infinity, star, polygon…)
• Morphing a flat grid of elements into a faux-3D spinning form (drum, globe, helix) and back
• Building a card-reveal pack (swipe-to-tear, 3D card flip, staggered stat fills) or Canvas power-effect showcase
• Building an onboarding spotlight tour / coach marks that walk the user across real controls (dim scrim, cutout, pointing tooltip)
• Editing an existing SwiftUI animation file

Scope & Safety

• Writes only inside the user's current project: the new or edited `.swift` (or `.metal`) file and, when needed, that project's `project.pbxproj`. Nothing outside the working directory.
• No network access, no package installs, no shell scripts. In Edit mode, only the named file changes.

Mode Detection

• **Edit mode**: prompt contains "edit", "update", "add X to", "change", or a `.swift` filename → read file first, change only what's asked, overwrite file on disk
• **Create mode**: everything else → generate a new complete file and write it to disk

---

Intent Inference (runs before code generation)

Before generating any code, parse the prompt for under-specified details and resolve them to defaults. Print a `🔍 Inferred from prompt:` block so the user can see — and override — what was auto-resolved. Only print lines that were actually inferred (not ones the user explicitly stated).

Step 0 — Normalize designer vocabulary

Translate any designer words in the prompt into skill-understood terms before running subsequent steps. This lets non-technical prompts ("snappy card that rips with anticipation") produce the same output as fully specified ones.

**Animation feel words → physics preset:**

| Designer says | Maps to | |---|---| | snappy / crisp / tight | UI pop `0.35/0.6` | | bouncy / springy / elastic | Snap `0.35/0.5` | | stretchy / rubber / wobbly | 3-phase rubber-band (see iOS 26 section) | | melts / floats / soft / gentle | Slow morph `0.6/0.8` | | stiff / precise / mechanical | Precision stiff `interpolatingSpring(220, 22)` | | linear / steady / constant | `.linear(duration:)` |

**Motion principle words → archetype / animation signals:**

| Designer says | Implies | |---|---| | anticipation | pre-stretch phase before main move | | follow-through | add overshoot to settle animation | | squash & stretch | scale deformation on impact (x expand, y compress) | | staging / stagger | offset `.animation(delay:)` per element | | pulse / breathe | `.breathe` isActive loop | | ripple | radial spread `Circle` scale from tap point | | flood | Liquid Toggle archetype, metaball fill | | wiggle / shake | `.wiggle value:` — error / rejection signal | | pop | quick `.scaleEffect` overshoot + snap back | | morph | Glass Morph archetype or shape interpolation | | liquid chrome / molten metal / mercury / brushed steel | Metal Shader — stitchable `.colorEffect` (see Metal Shaders section) | | holographic / iridescent / oil-slick / foil / prism | Metal Shader — fresnel rainbow in a `.colorEffect` | | plasma / lava / nebula / aurora / fluid ink | Metal Shader — FBM field in a `.colorEffect` |

**UI element names → SwiftUI primitives:**

| Designer says | Also called | SwiftUI | |---|---|---| | bottom sheet / tray / drawer / panel | pull-up, modal sheet | `.sheet` + `.presentationDetents` | | modal / dialog / overlay / lightbox | full-screen sheet | `.sheet` (full) or `.fullScreenCover` | | popover / tooltip / callout / bubble | hover card | `.popover` | | toast / snackbar / nudge / banner | inline notification | custom overlay + auto-dismiss `.task` | | alert / warning / confirm | dialog | `.alert` or `.confirmationDialog` | | card / tile / surface | panel | `RoundedRectangle` + material | | chip / tag / pill / badge | filter tag | custom `Capsule` | | FAB / floating action button | floating button | absolute-positioned `Button` in `ZStack` | | segmented control / pill selector / tab strip | toggle group | `Picker(.segmented)` or custom pill | | skeleton / shimmer / placeholder | loading placeholder | `redacted(.placeholder)` or animated opacity | | spinner / loader / throbber | activity indicator | `ProgressView` | | contextual menu / long-press menu | press-hold menu | `.contextMenu` | | action sheet / bottom action menu | options sheet | `.confirmationDialog` |

Step 1 — Symbol → Effect lookup

If the prompt names a symbol (or describes one by subject) and does **not** specify an animation effect, apply this table:

| Symbol / subject | Type | Auto-effect | |---|---|---| | `signature`, `pencil`, `pencil.line`, `scribble`, `lasso` | stroke | `.drawOn` auto-loop | | `checkmark`, `heart` (outline), `star` (outline), `wifi`, `antenna.radiowaves` | stroke | `.drawOn` auto-loop | | `heart.fill`, `star.fill`, `circle.fill` | flood-fill | `.bounce value:` (drawOn invisible on fill shapes) | | `circle.dotted`, `rays`, `waveform` | animated structure | `.variableColor.iterative.reversing` or `.breathe` | | `arrow.clockwise`, `arrow.2.circlepath`, `gear` | rotation | `.rotate` (indefinite, `isActive`) | | `bell`, `bell.fill` | discrete action | `.bounce value:` |

Step 2 — Showcase mode vs. interaction mode

• **No user action described** (no "tap to", "on submit", "when user"…) → **showcase mode**: drive with `.task` auto-loop. Sy