08 Learning Path · 5 lessons

Motion & Animation

A simple, hands-on path for UI motion: learn the vocabulary, then practice the core moves with interactive demos.

Start with lesson 01 ← All paths

What you'll learn

  • ✓ Name any UI motion precisely enough to brief it
  • ✓ Choose the right entrance and make exits feel native
  • ✓ Add hover, focus, and press feedback that confirms intent
  • ✓ Ship scroll reveal with restraint instead of the generic default
  • ✓ Decide when not to animate at all

About this path

Motion is a language most teams never learn the words for, so feedback stays vague and AI ships the same generic fades. This path fixes that. Start with the Animation Vocabulary glossary, then practice the three moves that carry most interfaces — entrances and exits, hover and press feedback, and scroll reveal — each with a demo you can replay. Finish with the decision framework and the motion-audit skill.

In this path

5 lessons
  1. 01

    Enter and Exit: The First Motion to Get Right

    The four ways an element can arrive on screen, when to use each, and the one rule that makes them feel native: exits run faster than entrances. Includes an interactive demo you can replay.
  2. 02

    Hover and Press: Make the Interface Answer Back

    Micro-feedback is the cheapest motion with the highest payoff. Hover lifts, focus rings, and a press that scales down all tell the user the interface heard them. Includes a live demo.
  3. 03

    Scroll Reveal: Motion That Earns Its Place

    Fade-and-rise on scroll is the most overused effect in AI-generated sites. Here is how to do it with restraint: trigger once, animate transform and opacity only, and never block content. Includes a live demo.
  4. 04

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

    A decision framework for choosing the lightest possible motion that still does the job, instead of defaulting to animate everything. Includes paste-ready project rules for each motion level.
  5. 05

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

    The full workshop for the /motion-audit skill: a ready-to-paste Claude Code skill that classifies every animation by the five-level motion system, strips the default scroll-fades and hover-bounces, and enforces a deliberate ceiling with sane durations and reduced-motion support.
More lessons coming soon. This path is updated weekly with new lessons.

Ready to start?

Begin with lesson 01: Enter and Exit: The First Motion to Get Right

Start path

Explore other paths

00

AI Design Starter Path

A plain-language beginner path from first setup to your first agent-ready design system context.
01

Beginner AI Setup

Your first week with AI design tools. From zero to working setup.
02

Claude Code

Install Claude Code, pick the right surface, and teach it your team rules with custom skills.
03

Visual Direction & Style

Stop saying "make it premium." Learn to give AI real visual direction.
04

Design System Automation

Token audits, naming conventions, and component reviews with AI.
05

Automation for DS Teams

GitHub Actions, browser automation, and overnight pipelines that run while you sleep.
06

Codex for Designers

Set up Codex, teach it your project rules, and turn repeatable design QA into reusable skills.
07

Agentic Design Systems

Make your design system readable by AI agents and coding tools.