Tag · 5 guides
Motion
Every guide tagged motion, sorted by most recent.
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.
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.
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.
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.
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.