Friendliness Approachability

This is a solid reference for making UI animations feel warm and inviting rather than sterile or intimidating. It maps Disney's animation principles to web interactions, giving you specific durations (200-350ms for most actions), easing functions, and CSS snippets for things like friendly waves and gentle appearances. The timing tables and approachability cues are immediately usable. Best suited for customer-facing interfaces like support chat, onboarding, or healthcare portals where you want users to feel comfortable. The guidance on moderate squash and stretch (10-20%) and gentle bounces keeps things professional while still feeling human. Worth having if you're trying to nail that approachable tone without going full cartoon.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill friendliness-approachability --agent claude-code