1. Habit
  2. Skills
  3. Animation Principles skill
iart-ai · 3K installs

Animation Principles skill
Runs by itself, animation change submitted.

Motion never feels stiff again.

Install the Animation Principles skill and make it a habit: follow https://gethabit.dev/skills/iart-ai/animation-principles.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

3K installs151 starsMIT licenceSource on GitHub ↗

Animation Principles

by iart-ai · 3K installs

The skill

The animation principles skill decides how things should move: timing, easing curves, stagger, weight and rhythm, returning concrete durations, cubic-bezier values and spring settings, for designers and motion developers.

Only when you ask.

The habit

Motion never feels stiff again.

↻ Runs by itselfanimation change submitted

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

animation change submitted. Runs in Claude Code routine.

  • ↻ animation change submitted
  • pull request labelled motion

02

It checks its work

timing rules + critic. If a check fails, it tries again.

  • ✓linear easing only on continuous loops
  • ✓every duration sits in the range for its element type
  • ✓list stagger total stays under about 800ms
  • ✓with 3+ elements, no more than about 1/3 move at once

03

It remembers

motion notes. The next run reads it first: accepted curves, durations and staggers.

loops/motion-timing-review-loop/notes.md

One run, step by step.
Then it stops.

Stop ruleStops after one animation change per run and one critic retry.

  1. 01

    Settle the pillars

    Your agent names the emotional intent, the micro-story and the craft goal first.

  2. 02

    Check the layers

    It confirms primary, secondary and ambient motion each have a role.

  3. 03

    Check easing

    Enters ease out, exits ease in, moves ease in and out.

  4. 04

    Check timing

    Durations follow the element type and grow with distance and size.

  5. 05

    Check stagger

    Groups stagger by 40-80ms for lists and 20-40ms for dense grids.

  6. 06

    Diagnose and fix

    It names the failure, such as stiff or floaty, and gives exact new values.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Animation Principles skill helps.

Use it when

  • ✓ motion feels stiff or floaty
  • ✓ choosing an easing curve and duration
  • ✓ staggering a list reveal

Skip it when

  • – picking an animation library
  • – static layout work

Questions

Animation Principles skill, answered.

Does it pick a framework?

No. It is tool-agnostic and returns numbers any implementation can use.

When does it prefer springs?

For interactive, interruptible motion; duration and easing suit timeline-locked sequences.

How do I install the Animation Principles skill?

Copy the prompt at the top into your agent. It installs the skill from iart-ai/motion-design-skills and sets up the habit. Or run npx skills add iart-ai/motion-design-skills --skill animation-principles.

Is the Animation Principles skill free?

Yes. It is published under MIT. Habit is free too.

Animation Principles. Now as a habit.

Install the Animation Principles skill and make it a habit: follow https://gethabit.dev/skills/iart-ai/animation-principles.md

  • Free
  • No account
  • Undo in one line

All iart-ai skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by iart-ai, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.