kinetic-physics

What problem does it solve?

This Skill helps designers and front-end developers create expressive, believable UI animations by applying the 12 Disney Animation Principles to DOM/CSS transitions, ensuring motion feels intentional and high quality.

Core Features & Use Cases

• Principle-based motion: Apply inertia, anticipation, follow-through, squash & stretch, and other principles to buttons, modals, and page transitions.
• Practical patterns: Guidance for choosing easing curves, springs, and timing when building interactions with CSS, GSAP, and Framer Motion.
• Use Case: Elevate a hover interaction or modal entrance so it communicates weight, intention, and feedback, improving perceived performance and delight.

Quick Start

Start by selecting a common interaction (e.g., a primary button hover) and apply a Spring-based scale, an appropriate ease curve, and a subtle delay to communicate anticipation and weight.