All skills

Interface Motion

Motioncraft

Design, audit, and implement project-specific premium interface motion systems using motion psychology, product archetypes, animation tokens, micro-interactions, route transitions, scroll storytelling, gesture feedback, springs, easing, reduced-motion variants, and performance repair. Use when Codex needs to make a web or app interface feel top-tier, responsive, cinematic, tactile, alive, trustworthy, or high-end; when choosing or reviewing Motion, Framer Motion, GSAP, Lenis, React Spring, CSS transitions, WAAPI, View Transitions, scroll-linked effects, hover, tap, drag, command-copy success, loading states, layout transitions, motion tokens, or animation quality; or when fixing generic motion, jank, accessibility failures, scroll hijacking, mobile motion issues, or unverified animation work.

What this skill adds

Turn motion into a project-specific design-system layer. Do not add generic fade-and-slide animation. Diagnose the product, decide what the user should feel and understand, then implement the smallest motion system that makes the interface clearer, faster, and more memorable.

Required Reference

  • For substantial motion work, read references/motioncraft.md before editing code. Use it for product archetypes, motion psychology, benchmark method, tokens, recipes, anti-patterns, and the quality rubric.
  • Useful bundled resources:
  • scripts/audit-motioncraft.cjs: run a read-only motion audit against a target project.
  • assets/templates/motion-map.md: copy or adapt when planning a motion system.
  • assets/templates/motion-tokens.css and assets/templates/motion-tokens.ts: starter token sets.
  • assets/templates/reduced-motion.css: reduced-motion baseline.

Non-Negotiable Protocol

  • Before adding animation, create a motion intent map in your working notes or final plan. Every major animation must name:
  • Surface or component.
  • User action or state change.
  • Psychological job: feedback, continuity, orientation, hierarchy, progress, reward, perceived performance, trust, or brand memory.
  • Product archetype and emotional tone.
  • Pattern, library, duration/easing/spring, reduced-motion alternative, and verification method.

Workflow

  • Inspect the project: framework, routes, components, CSS system, animation libraries, tokens, design docs, target users, mobile constraints, and performance risks.
  • Classify the surface: SaaS/dashboard, docs/devtools, marketplace, portfolio/editorial, AI/chat tool, ecommerce, mobile app, creative/game, or mixed product.
  • Define motion psychology: what should feel fast, stable, premium, playful, technical, calm, powerful, safe, or memorable.
  • Benchmark 3-5 relevant high-quality references when the project benefits from it. Extract principles only; do not copy assets, copy, or brand-specific choreography.
  • Build or extend motion tokens before adding bespoke values.
  • Choose the stack by job: CSS for simple states, WAAPI for imperative sequences, Motion/React Spring for springs/layout/gesture, GSAP for timeline-heavy storytelling, Lenis only for high-craft narrative scroll.

Taste Rules

  • Direct manipulation must respond within 50 ms and visible feedback usually completes in 80-160 ms.
  • Dense product UI should feel precise and low-noise; serious tools rarely need bounce above 0.16.
  • Spatial transitions should preserve continuity through shared elements, stable origins, and velocity-aware springs.
  • Stagger by perception, not decoration: 16-24 ms for dense UI, 32-48 ms for cards/lists, 60-90 ms for editorial reveals.
  • Motion should never hide broken layout, unclear hierarchy, weak copy, poor contrast, or missing affordance.
  • Smooth scrolling belongs in narrative/product storytelling. Avoid it in docs, dashboards, tables, forms, admin tools, and code-heavy workflows.

Default agent prompt

Use $motioncraft to design a project-specific, accessible, high-performance motion system with a motion intent map, tokens, reduced-motion variants, and browser verification.