Motion & animation

Builds an animation in the right order: whether it should animate at all, its purpose, the cheapest tool, properties, easing, interruption and reduced motion.

Checks motion code against ten firm standards and returns a findings table with a verdict.

Audits every animation in a codebase and writes a prioritized plan with a self-contained fix for each.

Keeps web animation within the frame budget: compositor-only properties, motion off the main thread, React state traps, will-change and a symptom table.

Apple's fluid interface principles for the web: instant response, direct manipulation, interruptible springs, momentum and rubber-banding.

A read-only sweep for places that deserve motion, filtered by how often they are seen and why, with a list of what was rejected.

Turns a vague description of a motion effect into its exact name, with hints on how to build it.

The official GSAP skill for the core API: tweens, easing, stagger, defaults, matchMedia and reduced motion, used the right way.

Official ScrollTrigger guidance: scroll-linked animation, pinning, scrub, triggers, refresh and the cleanup mistakes to avoid.

Official guidance for GSAP in React and Next.js: useGSAP, refs, scoping with gsap.context() and cleanup.

Official guide to GSAP plugins: Flip, Draggable, SplitText, ScrollSmoother, MorphSVG and Observer.

Prioritized rules for slow animations: patterns to avoid, choosing the mechanism, measuring, scroll, paint, layers and blur.

A complete cinematic motion language on GSAP, ScrollTrigger and Lenis: tokens, text and clip reveals, parallax, pinned sections and hover.

LottieFiles' motion principles: an eight-step checklist, duration and easing tables, motion personalities and ready patterns for presses, entrances and success states.

How to animate state and route changes with React's ViewTransition, transition types and view-transition CSS, including Next.js specifics.