Gesture Responses

A solid reference for making buttons, taps, and drags feel physically responsive instead of laggy. The timing tables are the real value here: press under 50ms, release around 200ms with overshoot easing, and anything over 100ms breaks the direct manipulation feel. It applies Disney animation principles to interaction design, which sounds gimmicky but actually translates well. The squash and stretch guidance (scale to 0.97 on press, overshoot to 1.02 on release) gives you concrete numbers instead of vague advice. Includes both CSS and JavaScript patterns for ripples and drag feedback. Best used when your interface feels sluggish or disconnected, and you need specific timing values to fix it.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill gesture-responses --agent claude-code