Micro Interactions

This applies Disney's 12 animation principles to UI feedback moments like button presses, toggles, checkboxes, and form validation. You get a quick reference table mapping each principle to specific implementations, timing guidelines for different interactions (100ms for hover, 200ms for toggles), and actual CSS examples with cubic-bezier values. The timing reference alone is worth having on hand. It's opinionated about durations and easing functions in a way that saves you from reinventing these decisions on every project. Includes prefers-reduced-motion reminders and practical advice like keeping button squash subtle since this is UI, not cartoons.

skills.sh installs: 1.5K
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill micro-interactions --agent claude-code

Installs into .claude/skills of the current project.

Files

Micro-interaction Animation

Apply Disney's 12 animation principles to small UI feedback moments and interface details.

Quick Reference

Principle	Micro-interaction Implementation
Squash & Stretch	Button press compression, toggle bounce
Anticipation	Hover state hints, pre-click feedback
Staging	Focus attention on active element
Straight Ahead / Pose to Pose	Progress vs state changes
Follow Through / Overlapping	Ripple effects, settling motion
Slow In / Slow Out	Snappy but smooth transitions
Arc	Toggle switches, circular menus
Secondary Action	Icons respond to parent state
Timing	100-300ms for most interactions
Exaggeration	Clear but not distracting
Solid Drawing	Consistent transform behavior
Appeal	Delightful, purposeful feedback

Principle Applications

Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.

SKILL.md on GitHub