The Claude UX Motion Skill: Tame the Five Animations Every AI Site Ships By Default

The five animations you did not ask for

Ask Claude to build a landing page and you will almost always get the same motion: everything fades up as you scroll, cards scale on hover, the hero has a parallax background, something bounces in on load, and a gradient blob drifts in a loop. Nobody designed this. It is the statistical average of every site the model has seen, and it lands on your build by default.

The result feels busy and generic at the same time. Motion that should direct attention instead scatters it.

This guide builds out the /motion-audit skill in full. The Motion Decision Tree teaches the five-level framework and ships a short version of this skill inline. Here you build the complete version: a per-project ceiling, a scorecard, and reduced-motion handling. You paste one file, and from then on it audits the motion in any generation against the same five levels.

---

What you will build

By the end you will have:

1. A real file at ~/.claude/skills/motion-audit/SKILL.md
2. A /motion-audit command you can run in any project
3. An audit that classifies every animation by the five-level system and removes anything above your ceiling
4. Durations, easing, reduced-motion, and a one-focal-motion rule enforced, with a scorecard

It runs in about ten minutes. Picking the right ceiling per project is the design judgment you keep.

---

The five motion levels

These are the levels from the Motion Decision Tree. The skill classifies every animation it finds into one of them, then removes anything above the ceiling you set.

• Level 0, none. No motion beyond instant state changes. The default, and the strongest choice when hierarchy is already clear.
• Level 1, micro-motion. Button, link, focus, and input feedback. Short transitions on opacity and transform. The safe ceiling for most product UI.
• Level 2, scroll reveal. Content paced in as it enters the viewport. Pacing only, never on the hero or on dense body text.
• Level 3, scroll-linked illusion. A cinematic, scroll-scrubbed moment. Maximum one per page, with a static fallback.
• Level 4, real-time 3D. Interactive, user-controlled 3D. Only when the control itself is the value, never decorative.

Level 0 · None

Level 1 · Micro

Level 2 · Scroll reveal

Level 3 · Scroll-linked

Level 4 · Real-time 3D

---

Build the skill

Step 1: Create the folder and file

mkdir -p ~/.claude/skills/motion-audit
touch ~/.claude/skills/motion-audit/SKILL.md

Step 2: Paste the full skill

Open ~/.claude/skills/motion-audit/SKILL.md and paste this. It defaults to a ceiling of Level 1. Change the one marked line to raise the ceiling for a project.

---
name: motion-audit
description: Audit and fix the motion in the most recent UI Claude generated or
  edited, against the five-level motion system. Use after building any screen,
  component, or page. Classifies each animation by level, removes anything above
  the project ceiling, and fixes durations, easing, and reduced-motion inline.
---

## What this skill does

Read the most recently generated or edited UI file. Find every animation,
transition, transform, scroll effect, and autoplaying loop. Classify each by
level, remove anything above the ceiling, fix what stays, and report what
changed.

## Motion ceiling for this project

Default ceiling: 1 (micro-motion).
[Change this line per project: 0, 1, 2, 3, or 4.]

- Level 0: no motion beyond instant state changes.
- Level 1: micro-motion (states, focus, short opacity/transform feedback).
- Level 2: scroll reveal (content paced in on entry; never hero or body text).
- Level 3: scroll-linked illusion (one cinematic scroll moment, with a fallback).
- Level 4: real-time interactive 3D (only when user control is the value).

Anything classified above the ceiling is removed or downgraded.

## Always flag and fix (the default-AI animations)

- Scroll-triggered entrance animations on hero content or body paragraphs.
- Hover scale above 1.02, or any rotate on hover.
- Bounce, spring, or elastic easing on UI.
- Durations above 600ms.
- More than one Level 3 moment on a page.
- Level 4 used for decoration rather than control.
- Parallax hero backgrounds and autoplaying decorative loops (drifting
  gradients, blobs, particles, marquees).

## Rules for the motion that stays

### Duration
- Micro-interactions: 120 to 200ms.
- Reveal and transitions: 200 to 400ms.
- Hard cap: nothing in the UI runs longer than 600ms.

### Easing
- Entrances: ease-out. Exits: ease-in.
- Movement between two on-screen states: ease-in-out.
- No default linear easing, no bouncy or elastic easing on UI.

### Properties
- Animate transform and opacity only.
- Never animate width, height, top, left, or margin (they cause layout thrash).

### Accessibility
- Every animation must respect prefers-reduced-motion: reduce.
- Under reduced motion, replace movement with an instant state change or a
  simple opacity fade. Never remove the feedback entirely.

### Restraint
- One focal motion per view. If two things move for attention, one is noise.
- Motion directs the eye to one place. It does not decorate every element.

## How to audit

For each motion found:
1. Name it and its type (state, entrance, reveal, scroll-linked, 3D, loop).
2. Classify it by level (0 to 4).
3. If it is above the ceiling, remove or downgrade it and say why.
4. If it stays, fix duration, easing, properties, and reduced-motion.
5. Confirm only one focal motion remains per view.

## Output format

First, a change list:
- [removed] [effect], level [n] above ceiling [c]
- [fixed] [effect]: [what changed, e.g. 600ms linear to 180ms ease-out]

Then a scorecard, each scored 0 to 10:
- Ceiling discipline: does every animation sit at or below the ceiling?
- Default-animation cleanliness: zero scroll-fades on hero, hover-scale,
  parallax, decorative loops?
- Duration and easing: all within range, correct curves, no bounce?
- Property safety: only transform and opacity animated?
- Reduced-motion: every animation has a reduced-motion path?
- Focus: one focal motion per view?

If every dimension scores 8 or higher, print:
"Motion audit passed."
Otherwise print:
"Motion audit failed. Fix the items above and re-run."

Step 3: Test it

Open any project. Ask Claude Code to build a landing page or a dashboard. It will almost certainly add the default animations. Then run:

/motion-audit

Claude reads what it built, classifies each animation by level, removes anything above the ceiling, fixes what remains, and prints the change list plus the scorecard.

Avoid · everything moves

One focal motion

---

Set the ceiling per project

The skill defaults to a ceiling of Level 1, which is right for most product work. For a marketing page where a paced reveal is part of the pitch, raise it to Level 2 and keep the reveal off the hero. Reserve Level 3 for a single cinematic scroll moment, and Level 4 only for a product where interactive 3D is the actual value.

Change one line in the skill, and the audit enforces the new ceiling on the next run.

---

Ship it

Exercise

Install the skill and run it on an over-animated page

20 min

1. Write the skill file

   Run mkdir -p ~/.claude/skills/motion-audit && touch ~/.claude/skills/motion-audit/SKILL.md. Paste the full skill from Step 2. Leave the ceiling at 1 for now.

   • The file exists at ~/.claude/skills/motion-audit/SKILL.md
   • The frontmatter name is motion-audit and the description says when to use it
   • You can find the single line that sets the ceiling

2. Run /motion-audit on a landing page

   Ask Claude to build a landing page with a hero and a few feature cards. Run /motion-audit. Read the change list and confirm it classified each animation by level, removed the scroll-fades and hover-scale, and gave any remaining motion a sane duration and easing curve.

   • The change list names at least one removed animation with its level
   • Remaining motion is 200ms or under with a real easing curve, not linear or bouncy
   • A prefers-reduced-motion path exists for anything that still moves

3. Raise the ceiling and re-run

   Change the ceiling line to 2. Re-run /motion-audit on the same page. Watch it now permit a paced scroll reveal where it previously stripped it, while still keeping it off the hero and still removing the decorative defaults.

   • The same page now allows a Level 2 reveal below the hero
   • Parallax and decorative loops are still removed regardless of ceiling
   • You understand which ceiling you want as your personal default