All skills

Interface Motion

Motioncraft

Design and implement premium interface motion systems, smooth scrolling, scroll-linked animation, micro-interactions, springs, easing, gesture feedback, page transitions, reduced-motion variants, and animation performance fixes. Use when Codex needs to make a web or app interface feel professional, alive, smooth, responsive, cinematic, tactile, or high-end; when adding Framer Motion, Motion, GSAP, Lenis, React Spring, CSS, WAAPI, scroll-triggered effects, hover, tap, drag, animated state changes, skeletons, loading motion, layout transitions, or motion tokens; or when reviewing animation jank, motion accessibility, or motion design quality.

What this skill adds

This skill turns motion into a first-class design-system layer. It is for production UI motion, not decorative animation.

Required Reference

  • For substantial motion work, read references/motioncraft.md before editing code. For a tiny one-off transition, use the quick workflow below and read the reference if the choice is not obvious.

Quick Workflow

  • Inspect the existing interface, framework, animation libraries, CSS tokens, and performance constraints.
  • Define the motion intent for each change: feedback, continuity, orientation, hierarchy, progress, or delight.
  • Add or reuse motion tokens before adding bespoke values.
  • Prefer CSS transitions for simple hover/focus/state changes, WAAPI for imperative sequences, Motion/React Spring for interruptible springs and layout transitions, GSAP for timeline-heavy storytelling, and Lenis only for sites that need high-craft smooth scroll.
  • Animate transform and opacity by default. Avoid transition: all, layout properties, expensive blur, and per-frame React state updates.
  • Make all motion interruptible and responsive to direct user input.

Motion Taste Rules

  • Direct manipulation must respond within 50 ms and usually complete visible feedback within 80-160 ms.
  • Spatial transitions should preserve continuity through shared elements, stable origins, and velocity-aware springs.
  • Use springs for gesture handoff, retargeting, drag/reorder, shared layout, and alive-feeling surfaces.
  • Use bouncy springs sparingly. Default to bounce 0; use 0.08-0.2 for tactile UI and rarely above 0.3.
  • Use one signature motion moment per viewport. Keep repeated product interactions quiet.
  • Stagger by perception, not decoration: 16-24 ms for dense UI, 32-48 ms for cards/lists, 60-90 ms for editorial reveals.

Implementation Notes

  • When adding a motion system to a project:
  • Create tokens for durations, easings, springs, distances, stagger, and reduced-motion scale.
  • Map component patterns: button, link, menu, popover, modal, drawer, toast, tab, card, list, page, scroll section, loading state.
  • Centralize defaults through CSS custom properties, Tailwind theme values, a MotionConfig, or project-local utilities.
  • Keep token names semantic enough for agents and humans to choose by intent.
  • Test the resulting feel on at least one desktop and one mobile viewport.

Default agent prompt

Use $motioncraft to add premium, accessible, high-performance motion to this interface.