Summary
This applies Disney's 12 animation principles specifically to hover states, which is honestly a great framework for something most devs just wing with arbitrary timing values. You get concrete recommendations like 150-200ms for hover-in and 200-300ms for hover-out, plus ready-to-use CSS patterns for card lifts, underline animations, and icon shifts. The timing table is genuinely useful reference material. It emphasizes keeping effects subtle (max 1.05 scale) and responsive, with proper fallbacks for touch devices using the hover media query. Good for when you want hover interactions that feel polished instead of just functional.
Install to Claude Code
npx -y skills add dylantarre/animation-principles --skill hover-interactions --agent claude-codeInstalls into .claude/skills of the current project.
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
An agent that runs the SEO playbooks that move rankings and ships PRs you control.
Get founding access →
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Files
SKILL.md
Select a file.
Featured
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →An agent that runs the SEO playbooks that move rankings and ships PRs you control.
Get founding access →Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →