Design and build web animations that feel right, grounded in the complete "Animations on the Web" course (animations.dev). Use proactively whenever building or improving motion — deciding whether to animate, choosing easing/duration/springs, implementing…
Reduced motion for web animation — ship every animation as two variants so motion never makes someone sick or distracted. Use when adding or reviewing `prefers-reduced-motion` handling; when deciding what an animation should become under reduced motion; when…
Frame budget for web motion — hold 60fps by animating composite-only properties and keeping animation off the main thread. Use when an animation is janky, choppy, or drops frames; when choosing which property to animate (`transform`/`opacity` vs…
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding; "one shape turning into another" → Morph). Use…
Animate with CSS alone — transitions, `@keyframes`, transforms, 3D, and `clip-path` — at the craft bar of the "Animations on the Web" course (animations.dev). Use when writing or fixing CSS motion, deciding between a transition and a keyframe animation,…
Diagnose an animation that feels off, janky, or broken and name the exact cause before touching code — the diagnosis loop from the "Animations on the Web" course (animations.dev). Use when an animation feels wrong but the user can't say why, when motion is…
Searches a UI for the few places motion would genuinely help, and names what should stay static. Read-only.
Build drag, swipe, and sheet interactions that track the finger 1:1 and stay interruptible, the way the "Animations on the Web" course (animations.dev) teaches. Use when building or fixing anything the user drags, swipes, flings, holds, or dismisses with a…