ui-animations

What problem does it solve?

Many web projects ship inconsistent, inaccessible, or janky animations that harm clarity, performance, and user comfort. This Skill centralizes motion design best practices, audit workflows, and ready-to-use implementation patterns so teams can deliver purposeful, production-grade UI motion. It reduces engineering guesswork and speeds up safe, performant animation delivery across React, GSAP, and Framer Motion stacks.

Core Features & Use Cases

• Audit Workflow (3-designer framework): step-by-step reconnaissance, motion-gap analysis, and prioritized remediation lists.
• Library selection & setup: guidance for GSAP + ScrollTrigger, Lenis smooth scroll integration, Framer Motion patterns, and Anime.js alternatives.
• Quick patterns & copy-paste components: magnetic cursors, staggered lists, modals, parallax heroes, text reveals, and page transitions.
• Timing, easing & testing: duration thresholds, cross-library easing mappings, and a testing checklist focused on 60fps and accessibility.
• Accessibility & sound design: prefers-reduced-motion handling, vestibular-safe rules, touch/pointer guidelines, and Web Audio API sound rules.
• Advanced references: Three.js & WebGL integration, algorithmic art, physics integration, and performance best practices.

Quick Start

Audit my project's animations and produce a prioritized remediation checklist using the 3-designer framework (Emil, Jakub, Jhey).