Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Add or fix animations in $ARGUMENTS. Load the ui-craft skill.
Step 1 — Decision Ladder: run the Decision Ladder from references/motion.md first. Anything that fails it gets removed, not improved.
Step 2 — Pick the library:
- If user opted into a stack during Discovery → read
references/stack.md. Use the matching section (Motion, GSAP, or Three.js). Never mix libraries on the same property. - Otherwise → CSS transitions /
@keyframes/animation-timeline: view()only.
Step 3 — Apply motion budget:
| Element | Budget |
|---|---|
| Color/opacity | 100-150ms |
| Small UI (tooltips, dropdowns) | 150-200ms |
| Medium UI (modals, panels) | 200-300ms |
| Large UI (page transitions, drawers) | 300-400ms |
Exit ≈ 75% of entrance duration (shorter, same ease-out — or a flatter tail like cubic-bezier(0.4, 0, 1, 1) for a softer exit). Never ease-in on UI (see references/motion.md). cubic-bezier(0.22, 1, 0.36, 1) is a safe spring-like default.
Step 4 — Multi-stage sequences → read ../examples/animation-storyboard.md. Stagger 30-80ms, not 200ms.
Step 5 — Respect the knobs:
MOTION_INTENSITY ≤ 3→ hover states only, no entrances, no scroll-triggered.MOTION_INTENSITY 4-7→ standard entrances + hover, one scroll reveal max per section.MOTION_INTENSITY 8+→ scroll-linked, page transitions, magnetic cursor OK (still honor reduced-motion).
Output: edit code directly. After each file, print the Review Format table. Flag any animation you removed and why.
Next step: /polish — the compound details around the motion you just added (rung 1).
