motion-design_skill

Overview

This skill provides focused motion design guidance for UI components, recommending easing curves, durations, and implementation patterns tailored to purpose and frequency. It enforces the principle that every animation must have a job and refuses unnecessary motion. Outputs are practical, token-based recommendations you can drop into CSS or JS animation libraries.

How this skill works

I first identify the animation’s purpose (responsiveness, spatial continuity, understanding, or delight), its frequency (high, medium, low), and the pattern type (enter/exit, morph, time-based, hover, or keyboard). Using those inputs I map to proven easing tokens and duration ranges, then produce a concise recommendation with properties, transform origin, and implementation notes. I also call out when to prefer springs versus beziers and when to avoid bounce.

When to use it

• When you need a concrete easing + duration for a specific component (dropdown, modal, toast).
• When an animation feels too slow, too fast, or disconnected and needs refinement.
• When deciding whether to animate an interaction at all (validate the animation’s job).
• When implementing micro-interactions for high-frequency keyboard or accessibility-driven flows.
• When choosing between spring and bezier implementations for interruptible motion.

Best practices

• Start by naming the component and trigger (e.g., dropdown on click, tooltip on hover).
• Always define the animation’s job; if none exists, recommend no motion.
• Match duration to frequency: high-frequency near-instant, medium 120–240ms, low 300ms+ for illustrative motion.
• Prefer transform and opacity for better performance; avoid animating layout properties when possible.
• Set transform-origin to match the visual origin of motion (trigger position) and keep bounce minimal or absent for responsive controls.

Example use cases

• Animate a dropdown opening from a button with an ease-out quart and ~180ms duration; transform-origin at the trigger.
• Refine a button press to be instant or near-instant for keyboard-driven flows (20–80ms) to preserve responsiveness.
• Create a slower, more illustrative modal entrance for onboarding with a longer ease-in-out and subtle opacity shift.
• Tweak hover micro-interactions to subtle scale or translate with short durations and no bounce for a natural feel.