motion-designby LottieFiles

Motion Design Skill.

A Claude Code and Codex skill for motion and video: applies motion design principles: timing, easing, choreography, and animation fundamentals.

Motion & Video

Download OpenDesign View usage guide

LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md

--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table

Front matter and section headings read from the upstream file on 2026-09-14 · 12,489 characters in full

01 What it does

What the motion-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A principles-only motion design reference for designers and developers animating interfaces. It starts from three pillars — emotional intent, visual narrative and motion craft — then narrows each decision through one of four motion personalities (Playful, Premium, Corporate, Energetic), each with fixed duration bands, easing curves and overshoot percentages.

Worked recipes cover button press, card entrance, success and error shake, supported by duration tables per element type, directional easing rules, choreography and stagger budgets, an emotion-to-motion map and weight classes. The guidance is expressed as numbers, defaults and constraints that apply to whatever animation system you already use.

What it produces

Three brand motion constants to define: signature easing, duration palette and entrance pattern
Ready-made cubic-bezier specifications borrowed from platform standards
Multi-step pattern recipes with per-step timings, such as the button press follow-through

See the example prompt ↗

How It Works

01
Settle the Three Pillars First
Identify the emotional intent, the visual micro-story and the craft that makes the motion believable before any timing or curve is chosen.
02
Lock One Personality Archetype
Pick a single archetype — Playful, Premium, Corporate or Energetic — and hold it across the project, since each carries its own duration band, easing curve and overshoot.
03
Use the Fewest Properties That Work
The property tables pair each effect goal with a primary property and optional secondaries; one property reads as direct, two as polished, three or more risks overwhelming the viewer.
04
Scale Duration by Distance
Start from the duration for the element type, then stretch it for travel distance: 100px is the base, 200px becomes 1.3x, 400px becomes 1.6x.
05
Ease by Direction
Entrances decelerate with an ease-out family curve, so the motion starts fast and lands gently.

02 Find your fit

When to Use the motion-design Skill

Use the motion-design skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

UI animations such as buttons, cards, modals and page transitions
Micro-interactions and feedback animations
Loading, success and error states
Planning scroll-triggered or progress-based animations

Know the Boundaries

Scenes with three or more elements cannot have more than a third of them in active motion at the same moment.
Bouncy error feedback: error states take no overshoot, because errors should feel firm.

What to Provide

The emotional targetDecide first what the viewer should feel, choosing among joy, calm, urgency or elegance.
A motion personality archetypeName the personality so timing, easing and overshoot stay coherent: Playful, Premium, Corporate or Energetic.
The primary propertyState what actually moves — position, scale, rotation or opacity — before writing any animation.

03 Inside the skill

Rules the motion-design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

No Linear Easing for Spatial Movement
Spatial motion must use easing curves; linear is reserved for spinners and progress bars only.
Never Opacity Alone for State Change
Important state changes must combine opacity with position or scale rather than fading in place.
Keep All Three Motion Layers
Every animation carries a primary action, secondary richness and ambient background life; a flat animation is one missing a layer.
Default to Corporate for UI
When no personality is stated, use Corporate for UI work and Playful for illustrations.
Make Entrances Longer Than Exits
Entrances run 30-50% longer than exits, because users care about what appears.
Never Cross a Third of the Screen Unchallenged
No motion travels more than 1/3 of the screen without an intermediate keyframe change.
Cap the Total Stagger
Whatever stagger pattern is used, the total delay budget must stay under 500ms.
Apply Disney Principles
Disney animation principles are expected, especially anticipation and follow-through.

04 Put it to work

Install motion-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add motion-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

Generic skills CLI form for skills/motion-design/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Work through the full quality checklist file for the evaluation criteria.
Confirm every duration matches its element type against the duration tables.
If the result feels cheap or flat, add shadow motion and background life as secondary and ambient layers.
If it has no personality, apply one archetype consistently instead of generic easing everywhere.
Check platform, accessibility and performance adaptation before shipping.

In OpenDesign import motion-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Branch main
Skill file: skills/motion-design/SKILL.md Content checksum recorded at verification; commit f9a8a04
License: MIT From LICENSE; SKILL.md says “MIT”.
Repository stars: 1,626 GitHub snapshot taken 2026-09-14 for the whole LottieFiles/motion-design-skill repository. Not a rating or usage count for motion-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to ApplyTriggers for using the skill plus a four-question decision tree routing to timing, personality, Disney principles or stagger.
Three Pillars (CRITICAL)Emotional intent, visual narrative and motion craft, plus the three motion layers every animation needs.
Motion PersonalityFour archetypes with duration, easing and overshoot values, plus three brand motion constants.
Property SelectionMaps effect goals to primary and secondary properties, with a simplicity threshold.
Duration TablePer-element durations, distance scaling, entrance versus exit ratio and interactive feedback timings.
Easing SelectionDirectional easing rules, industry cubic-bezier standards and material-based duration and overshoot scales.
Common PatternsStep-by-step recipes for button press, card entrance, success state and error shake.
Choreography EssentialsHero lead, spatial consistency, counter-motion, the 1/3 rules and stagger delay budgets.
Emotion-to-Motion MapSeven emotions mapped to character, path, easing and duration, plus path-as-language meanings.
Weight ClassificationHeavy, medium and light elements with durations, overshoot and damping guidance.
Quality RulesMust-never-break CRITICAL items and HIGH recommendations for duration, easing and consistency.
Troubleshooting Quick ReferenceFive animation smells with likely causes and fixes, from robotic to flat.

The Skill's Own Description

“Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.”

Front-matter description from SKILL.md. The full file is about 12,489 characters. Read the full file on GitHub.

06 Before you install

Questions About the motion-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does this lock me into one animation library?

No. The file states support for CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system, so the guidance comes as timing, easing and choreography decisions rather than library-specific code.

How long should a modal transition take?

The duration table gives modals and dialogs 300-400ms, framed as a focus shift. For contrast, tooltips and micro-feedback sit at 80-120ms because they must feel instant.

Should an elastic element bounce more than a paper card?

Yes. The material-based easing table scales duration and overshoot by implied material: elastic runs a 0.8x duration scale with 15-25% overshoot, while paper stays at 1.0x with 3-5% overshoot.

Motion Design

Run motion-design on a Real Motion and Video Task.

Download OpenDesign, import motion-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills