web-animation-router

What problem does it solve?

It prevents slow, inconsistent, and inaccessible motion work by routing each animation requirement to the best-fit library or CSS-native approach, then applying production-ready recipes and constraints.

Core Features & Use Cases

• Route-by-requirement animation selection: chooses CSS-native, Motion, GSAP, AutoAnimate, Rive, or dotLottie based on DOM changes, scroll behavior, SVG needs, and orchestration complexity.
• Production motion guardrails: enforces CSS-first, one animation library per DOM element, reduced-motion gating, and performance budgets (compositor-only properties, INP discipline).
• Token + recipe foundation: applies motion tokens/springs, scroll-driven strategies (CSS scroll/view timelines or GSAP+Lenis sync), and View Transitions handling for page changes.
• Use case examples: implement scroll-driven section reveals, kinetic typography with variable-font axes, microinteraction catalogs (buttons, accordions, tooltips), AI-product UX streaming motion, and SVG morph/draw effects.

Quick Start

Use the web-animation-router skill to implement the animation for a feature by asking it to select the cheapest compliant tool (CSS-native first, then Motion/GSAP/others) and provide the exact production recipe with accessibility and performance gates.