Agent skill · design visual · onewave-ai
motion-language-designer
Define a product's motion design language -- duration and easing scales, choreography rules, and signature moves -- and export it as tokens plus ready-to-use Framer Motion variants and CSS. The difference between animations and a motion system: everything moves like it belongs to the same product.
Why this skill is useful
Provides a structured motion design system with specific choreography rules and exportable assets that the AI wouldn't generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
Motion Language Designer Design motion the way type and color get designed: as a system with a scale, roles, and rules -- not per-component improvisation. Output is a motion spec plus drop-in implementation (Framer Motion variants, CSS custom properties and keyframes) so the system is enforceable, not aspirational. Workflow 1. Read the brand. From the existing product (or its design tokens and a description of the personality): is this product calm, snappy, playful, austere? Audit any existing animations -- inventory every duration, easing, and effect currently in the codebase. The spread of that inventory (14 different durations is typical) is the motivation slide. 2. Define the scale. Duration tokens (instant ~100ms for state feedback, fast ~180-220ms for micro-interactions, base ~300ms for reveals, slow ~500ms+ for scene changes) and an easing vocabulary (standard, decelerate for entrances, accelerate for exits, plus at most ONE signature spring/overshoot -- the personality lives here). Calibrate values to the brand read from step 1, not generic defaults. 3. Write the choreography rules. The part most systems skip: what animates and what never does; enter/exit asymmetry (exits faster than entrances); stagger rules (children cascade at 30-60ms, capped so long lists do not take seconds); hierarchy (one hero motion per view, everything else supports); distance rules (elements travel short distances -- 8-24px -- not across the screen); and the reduced-motion contract (every animation has a prefers-reduced-motion behavior: fade or nothing). 4. Name the signature moves. 3-5 named, reusable compositions ("card-lift", "panel-reveal", "count-up") that recur across the product and make it recognizable. Each gets a spec: trigger, properties animated, duration/easing tokens used, and when NOT to use it. 5. Export. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/motion-language-designer