Auditing Animation: Three Lenses on Motion
A motion auditor blends three conflicting philosophies — restraint, polish, play — weighted to context to catch the tells of generic AI animation.
Ask an AI agent to "add some animation" and you get the median: things that pop in from scale(0), transitions on a bare ease, a fade on every element whether it earns one or not, and zero respect for prefers-reduced-motion. It moves, so it looks done. It isn't. The model ships the median, and median motion is the cheapest-looking thing on a page.
The fix isn't "less animation" or "more animation" — it's judged animation. The best motion practitioners disagree with each other on purpose: one preaches restraint, one preaches production polish, one preaches play. A good motion audit holds all three lenses at once and weights them to context. This post is about how to run that audit, and how to load it into your agent so the next "add some animation" comes back senior instead of slop.
Key Takeaways
- The slop signature is four tells.
scale(0)entrances, bareeasecurves, decorative-by-default motion, and missingprefers-reduced-motion— catch these and you've caught most generic AI animation. - Three lenses, weighted to context. Emil Kowalski (restraint), Jakub Krehel (production polish), and Jhey Tompkins (play) disagree on purpose; the audit blends them by what you're building.
- Audit mode and create mode are different jobs. One reviews existing motion against the lenses; the other generates motion that already passes. Use the right mode.
- Motion principles belong in a skill, not your head. Load design-motion-principles so the agent applies easing, duration, and intent rules before it writes a keyframe.
- A critique pass is cheap insurance. motion-design-critique reviews motion the way a senior would — naming the tell, not just saying "feels off."
The Slop Signature
Generic AI motion is recognizable because it's a default reflex, not a decision. The agent reaches for the same four habits every time:
| Tell | What the agent does | What it should do |
|---|---|---|
scale(0) entrance | Elements balloon from nothing | Enter from scale(0.96) + opacity, short distance |
Bare ease | One curve for everything | Match curve to intent — ease-out for entrances, spring for interaction |
| Decorative by default | Fades on every element | Animate only what carries meaning — state changes, focus, hierarchy |
| No reduced-motion | Ignores the media query | Wrap non-essential motion in prefers-reduced-motion: no-preference |
None of these are wrong every time. A scale(0) can work on a playful confetti burst. The problem is the agent applies them everywhere, with no theory of why. The audit's job is to ask "what does this motion mean?" and reject the ones that mean nothing. For the deeper argument on why this matters, see motion that doesn't feel cheap.
The Three Lenses
A single philosophy of motion will steer you wrong. Restraint applied to a kids' app feels dead; play applied to a banking dashboard feels unserious. The auditor holds three views and weights them to the work in front of it.
| Lens | Practitioner | Core belief | Weight it heavily when |
|---|---|---|---|
| Restraint | Emil Kowalski | Most UI motion should be invisible; if you notice it, it's too much | Building tools, dashboards, dense data UIs |
| Production polish | Jakub Krehel | Motion is craft — timing, choreography, and detail separate pro from amateur | Marketing pages, product launches, hero moments |
| Play | Jhey Tompkins | Delight is a feature; surprising, characterful motion builds affection | Consumer apps, brand-forward sites, onboarding |
The skill behind this is design-motion-principles, which encodes easing, duration, and intent rules so the agent doesn't have to be told them each time. Install it:
npx skills add kylezantos/design-motion-principles
With the principles loaded, the agent stops defaulting. It asks the question the lenses force: is this a tool, a pitch, or a toy? Then it weights accordingly — restraint-heavy for the dashboard, polish-heavy for the landing page, play-heavy for the onboarding flow. Same agent, three different motion personalities, chosen on purpose.
Create Mode vs Audit Mode
These are two distinct jobs and conflating them is how slop survives. In create mode you're generating new motion; the goal is to produce animation that already passes the three lenses — correct easing, earned motion, reduced-motion guard baked in. In audit mode you're reviewing existing motion against the lenses; the goal is to name what's wrong specifically enough to fix it.
Audit mode is where motion-design-critique earns its place. Instead of a vague "the animation feels off," it returns the tell by name: "this scale(0) entrance reads as generic — switch to scale(0.96) and shorten to 200ms" or "no prefers-reduced-motion guard on the parallax." Install it:
npx skills add LobzyJay/motion-design-with-claude --skill motion-design-critique
A practical loop looks like this: generate in create mode with the principles skill, then run the critique skill in audit mode before you ship. The critique catches the tells that slipped through, names them, and the create pass fixes them. Two skills, one loop, motion that survives a senior review.
# 1. Generate with principles loaded
"Add entrance + interaction motion to the pricing cards. This is a
marketing page — weight production polish, keep restraint on the
data, no decorative fades. Guard everything with reduced-motion."
# 2. Audit before shipping
"Run the motion critique on the pricing cards. Name any tells:
scale(0), bare ease, decorative-by-default, missing reduced-motion."
Frequently Asked Questions
Why three lenses instead of one set of rules?
Because motion that's right for one product is wrong for another, and a single rulebook can't encode that. Restraint is correct for a dashboard and wrong for onboarding. The three lenses are a deliberate disagreement — holding them at once forces the audit to ask "what is this, and what does it need?" instead of applying one taste everywhere. That context-weighting is the senior move.
Isn't "less animation" the safe default?
It's the safe default, not the right one. Restraint is a great instinct for tools and data UIs, which is most of what developers build — so default-to-restraint will be right more often than not. But it's still a default, and shipping a brand-forward consumer app with dashboard-grade restraint reads as timid. The point of the audit is to choose, not to reflexively minimize.
What exactly does "decorative by default" mean?
It means the agent animates everything regardless of whether the motion carries meaning. A fade on a state change communicates something; a fade on a static heading communicates nothing and just adds latency to perceived load. The audit's rule: motion should mark a change — entrance, exit, focus, hierarchy shift. If nothing changed, nothing should move.
Do I need both skills, or will one do?
You can ship with just design-motion-principles — it raises the floor on generated motion immediately. But pairing it with motion-design-critique closes the loop: principles set the standard, critique verifies you met it. For anything customer-facing, run both. The critique pass costs one prompt and catches the tells that slip through generation.
Browse the full set of motion and design skills in the Designs category, or explore the whole catalog at aiskill.market.