Motion Decision Tree: When to Animate, What to Animate, What to Leave Still

Motion is the fastest way to look generic

Default AI motion is: fade-in on scroll, slide-up from bottom, scale-on-hover, bounce entrance, parallax hero. Every AI-generated site does these. Which is why they all feel the same.

The issue is not that motion is bad. The issue is that motion without a job turns into noise.

Examples to study

The job should be visible before the animation is pretty.

Use these as naming examples. If you cannot name the job, the motion is probably decoration.

Avoid

Default AI entrance

Fade-up, slide-up, blur-in, repeat. It says "something moved" but does not explain why.

Save changes

Level 1

Micro feedback

A press, hover, or focus state confirms that the interface heard the user.

Orient

Spatial continuity

The object moves from list to detail, so the user understands what changed.

✓

Level 1

Status feedback

Motion marks progress or completion. It reduces uncertainty instead of adding spectacle.

Apple HIG Motion should clarify status, feedback, and instruction. Material Design Navigation transitions should show where the user is going. UI Motion Reference Use it for timing, easing, and pattern vocabulary.

This guide is a decision tree for motion. You walk through it before adding any animation. Each path ends with a specific motion level and a paste-ready block for your CLAUDE.md.

---

The core question

Before you add any animation, ask one question:

What job does this motion need to do, and what is the lightest way to achieve it?

If the answer is “I do not know” or “it will look nice”, the correct motion level is none.

If the answer is specific (feedback, orientation, emphasis, depth, explanation), pick the lightest level that delivers that job.

---

The decision tree

Walk through these questions in order. Stop at the first one whose answer is “yes”. That is the level you need.

1. Q1

   Hierarchy already clear?

   Yes → Level 0 (no motion). The default.

2. Q2

   Interface needs to feel responsive?

   Yes → Level 1 (micro-motion).

3. Q3

   Sections need pacing?

   Yes → Level 2 (scroll reveal).

4. Q4

   Want cinematic depth without 3D cost?

   Yes → Level 3 (scroll-linked illusion).

5. Q5

   User must inspect, rotate, manipulate?

   Yes → Level 4 (real-time 3D).

The answer is usually one level lower than your first instinct.

Each level has a specific job. The levels are not a ladder you climb. They are a shelf you pick from.

Level 0 · None

Level 1 · Micro

Level 2 · Scroll reveal

Level 3 · Scroll-linked

Level 4 · Real-time 3D

---

Level 0: No motion

Use when: the hierarchy is already clear, the page has strong imagery, animation would slow down comprehension, or the section exists only to convey information.

Examples: documentation pages, dense dashboards, editorial articles, pricing tables, comparison pages.

When to force Level 0: any time you catch yourself thinking “this section feels empty, maybe add an animation.” Empty is not the problem. The composition is.

The rule:

## Level 0: No motion (default)

- Content appears on load. No entrance animations.
- No scroll-triggered reveals. No fade-in, slide-up, blur-to-focus.
- No parallax backgrounds. No floating decorative elements.
- Hover states change only the cursor and the link underline.
- This is the default level for every section unless promoted to Level 1+ with a specific reason.

---

Level 1: Micro-motion

Use when: you need hover feedback, subtle polish is enough, or the interface needs to feel responsive to user input.

Examples: buttons, cards, navigation items, small product interactions, form fields.

What counts as micro-motion:

• Hover lift (translateY -1px to -2px)
• Opacity shift (0.7 to 1 or 1 to 0.7)
• Soft scale (0.98 to 1 on press)
• Underline reveal on links
• Color transitions on focus states

What does NOT count as micro-motion:

• scale(1.05) on hover (too much)
• rotate(2deg) on hover (gimmick)
• bouncy easing curves (signals “default AI”)
• duration over 200ms (feels sluggish)

The rule:

## Level 1: Micro-motion (interactive feedback only)

- Hover transitions: 150ms ease-out. One property at a time.
- Approved hover effects: opacity 0.7, translateY(-1px), underline reveal.
- Button press: scale(0.98), 100ms ease-out.
- No scale-up, no rotate, no skew, no elastic easing.
- Duration caps: hover 150ms, press 100ms, color 200ms. Nothing longer.
- Focus rings appear instantly, no animation.

---

Level 2: Scroll reveal

Use when: sections need pacing, you want the story to unfold gradually, or content needs a little theatricality without heavy implementation.

Examples: landing pages, editorial long-form pages, case studies, campaign pages.

Approved scroll reveal patterns:

• Fade + translate(0, 16px) → fade + translate(0, 0)
• Duration: 400ms to 600ms, ease-out
• Trigger: at 50% viewport intersection, not on page load
• Stagger: maximum 3 items, 80ms between each

Blocked patterns:

• Blur-to-focus entrance
• Scale-from-small entrance
• Rotate-in entrance
• Staggers of more than 3 items
• Anything that animates on page load instead of on scroll

The rule:

## Level 2: Scroll reveal (pacing only)

- Approved reveal: opacity 0 → 1, translateY(16px) → translateY(0). 500ms ease-out.
- Trigger at 50% viewport intersection. Once per element, never repeat.
- Stagger: maximum 3 items, 80ms between. No long chains.
- No blur, no scale, no rotate, no skew.
- Never animate hero content. Hero is always Level 0.
- Never animate body text paragraphs. Paragraphs are always Level 0.
- Only animate: section-level containers, major imagery, CTA blocks.
- Respect prefers-reduced-motion: disable all Level 2 animations.

---

Level 3: Scroll-linked illusion

Use when: you want a sense of cinematic depth, you need to simulate movement through a scene, or full 3D would be too expensive or too heavy.

Examples: product showcases, environment reveals, concept pages with a strong centerpiece, hero sections for product launches.

Approved techniques:

• Video scrub tied to scroll position (the frame advances as the user scrolls)
• Frame-by-frame image sequence (for smooth 30–60fps reveals)
• Exploded-view motion (parts of a product separating as you scroll)
• Sticky section with changing inner content

Critical rules:

• Maximum ONE Level 3 moment per page. If you have two, the second one is decoration.
• The video or sequence must be under 2MB compressed, or it kills mobile.
• Always have a static poster frame as fallback for prefers-reduced-motion and slow connections.
• The motion must explain something about the product, not just demonstrate effort.

The rule:

## Level 3: Scroll-linked illusion (cinematic moments only)

- Maximum one Level 3 moment per page. Never two.
- Approved: video scrub tied to scroll, frame sequence tied to scroll, sticky section with changing inner content.
- Video assets under 2MB compressed. Under 1MB mobile.
- Static poster frame always provided as fallback.
- Prefers-reduced-motion: disable scroll scrubbing, show static key frame instead.
- The motion must explain the product. If it is decorative, downgrade to Level 0 or 1.
- Never use Level 3 in documentation, dashboards, or pricing pages.

---

Level 4: Real-time interactive 3D

Use when: interaction itself is the value. Users must inspect, rotate, manipulate, or explore the artifact to understand it.

Examples: configurable products (car configurators, furniture customizers), exploratory data experiences, 3D product demos where camera control matters.

When Level 4 is wrong:

• Decorative hero objects (use Level 0 or a static render instead)
• Scroll-driven storytelling (use Level 3 instead)
• Visual effects that do not require user control (Level 3 wins)
• Anything where the user cannot actually learn something new by interacting

The rule:

## Level 4: Real-time interactive 3D (user control is the value)

- Use ONLY when the user can learn something new by interacting (rotate, inspect, configure).
- Never use for decorative hero objects. Downgrade to Level 0 + a static hero image.
- Never use as a replacement for a product screenshot. Screenshots are clearer.
- Always have a 2D fallback for mobile, prefers-reduced-motion, and slow connections.
- Performance budget: 60fps on mid-range devices. Test before shipping.
- If in doubt, try Level 3 first. Level 4 is rarely necessary.

---

The trade-off table

Criterion	0 · None Best pick Default	1 · Micro Interactive feedback	2 · Reveal Scroll pacing	3 · Illusion Cinematic moment	4 · Real 3D User control is the value
Implementation	None	Minutes	1 hour	1 day	Days to weeks
Maintenance	None	Low	Low	Medium	High
Performance risk	None	Low	Medium (mobile)	High (assets)	High
Use when	Always the starting point	Interactive elements	Pacing long narrative pages	One cinematic moment per page	User control is the value

Read the table in one direction: cost goes up, but so does the specificity of the use case. Level 4 is not “better” than Level 0. It is appropriate for a different job.

---

The premium motion question

Before shipping any motion, run three checks:

1. Does this improve the experience, or does it just show effort?
2. Does this support the brand, or does it compete with it?
3. Would removing 50% of the motion make the page feel stronger?

If the answer to 1 is “shows effort”, cut it. If the answer to 2 is “competes”, cut it. If the answer to 3 is “yes”, cut it.

Premium is usually less motion, executed more precisely. It is almost never more motion.

---

The combined motion block for CLAUDE.md

Paste this full block into your CLAUDE.md. It covers all five levels and the constraints between them.

## Motion rules

Default motion level: 0 (none).
Promote sections to higher levels only when a specific job requires it.

### Level 0: No motion
- Content appears on load. No entrance animations.
- No scroll-triggered reveals, no parallax, no blur-to-focus.
- Hover states change cursor and underline only.
- This is the default for every section.

### Level 1: Micro-motion
- Hover transitions: 150ms ease-out.
- Approved: opacity 0.7, translateY(-1px), underline reveal.
- Button press: scale(0.98), 100ms.
- No scale-up, no rotate, no bounce, no elastic.

### Level 2: Scroll reveal
- Approved: opacity + translateY(16px) → 0, 500ms ease-out.
- Trigger at 50% viewport intersection. Once only.
- Stagger max 3 items, 80ms apart.
- Never animate hero, body paragraphs, or dense information tables.
- Respect prefers-reduced-motion: disable.

### Level 3: Scroll-linked illusion
- Maximum one Level 3 moment per page.
- Video or frame sequence under 2MB compressed (1MB mobile).
- Static poster fallback always provided.
- Must explain product, not just demonstrate effort.
- Never in documentation, pricing, or dashboards.

### Level 4: Real-time 3D
- Only when user control is the value (inspect, rotate, configure).
- Never decorative.
- 2D fallback required for mobile and reduced-motion.
- Performance budget: 60fps on mid-range devices.

### Global motion rules
- Never more than one motion level active at the same time in the same section.
- Never animate on page load. Animate on intent (hover, scroll, click).
- Always respect prefers-reduced-motion.
- If Claude adds motion not listed above, STOP and ask first.

---

The motion audit skill

Create ~/.claude/skills/motion-audit/SKILL.md:

---
name: motion-audit
description: Audit the most recent generation against the 5-level motion system.
  Run after Claude generates any page, component, or section with interaction.
---

Review the most recent generated file(s) for motion violations.

For every animation, transition, transform, or keyframe:

1. Name the motion (e.g. "fade-up on scroll", "scale(1.05) on hover").
2. Classify it by level (0, 1, 2, 3, 4).
3. Check it against the approved patterns for that level in CLAUDE.md.
4. If it violates the level's rules, state the violation and fix it inline.
5. If the element should be at a different level, downgrade or upgrade it and explain why.

Specifically flag:
- Scroll-triggered entrance animations on hero content
- Scroll-triggered animations on body paragraphs
- scale values above 1.02 on hover
- rotate on hover
- bouncy or elastic easing
- Durations above 600ms
- Multiple Level 3 moments on one page
- Level 4 used for decoration

Report format:
- VIOLATION: [what], at [where]
- LEVEL: [current] → [should be]
- FIX: [applied change]

If no violations, report: "Motion audit clean. All animations match the 5-level system."

Invoke with /motion-audit after any generation with interactive elements.

---

What to do next

The shift from “AI site with 12 animations” to “designed site with 1 deliberate moment” is almost always one file and one review skill away. Run the exercise on a page you actually own.

Avoid · everything moves

One focal motion

Exercise

Downgrade one page of your site to the right motion level

30 min

1. Inventory every animation on the page

   Open a real page you own (ideally a landing page or hero-heavy page). Walk through it and list every single animation: hover effects, scroll reveals, parallax, loading transitions, hero video. Tag each one with its current level (0, 1, 2, 3, or 4) using the decision tree in this guide. If an animation does not fit any level, flag it as “unjustified”.

   • Every animation is listed, including the small ones (hover underline, button press)
   • Each one has a level tag AND a one-line job description (what is it doing?)
   • At least one animation is flagged as “unjustified” or “one level too high”

2. Paste the combined CLAUDE.md block and regenerate

   Paste this into your project’s CLAUDE.md. Ask Claude Code to regenerate the page you inventoried and enforce the rules. Compare before and after. The new version should have fewer animations, each doing a defined job.

   • The regenerated page has strictly fewer animations than the original
   • Every remaining animation maps to a specific level in the block
   • The hero is Level 0 (static) unless you had a deliberate Level 3 moment
   • Mobile feels faster, not just “cleaner”

   ## Motion rules
   
   Default motion level: 0 (none).
   Promote sections to higher levels only when a specific job requires it.
   
   ### Level 0: No motion
   - Content appears on load. No entrance animations.
   - No scroll-triggered reveals, no parallax, no blur-to-focus.
   - Hover states change cursor and underline only.
   
   ### Level 1: Micro-motion
   - Hover transitions: 150ms ease-out.
   - Approved: opacity 0.7, translateY(-1px), underline reveal.
   - Button press: scale(0.98), 100ms.
   - No scale-up, no rotate, no bounce, no elastic.
   
   ### Level 2: Scroll reveal
   - Approved: opacity + translateY(16px) to 0, 500ms ease-out.
   - Trigger at 50% viewport intersection. Once only.
   - Stagger max 3 items, 80ms apart.
   - Never animate hero, body paragraphs, or dense tables.
   - Respect prefers-reduced-motion: disable.
   
   ### Level 3: Scroll-linked illusion
   - Maximum one Level 3 moment per page.
   - Video or frame sequence under 2MB compressed.
   - Static poster fallback always provided.
   - Never in documentation, pricing, or dashboards.
   
   ### Level 4: Real-time 3D
   - Only when user control is the value.
   - Never decorative.
   - 2D fallback required.
   
   If Claude adds motion not listed above, STOP and ask first.

   Copy motion block