Summary
Applies Disney's 12 animation principles to UI elements that need to grab user attention like notification badges, error messages, and feature callouts. You get specific timing recommendations (pulses should run 2-3 seconds, errors shake once at 400ms, urgent alerts loop until dismissed), ready to use CSS keyframes for pulse, glow, shake, and ring effects, and sensible guardrails like auto-stopping after 3-5 cycles and limiting to one attention animation at a time. The timing table alone is worth having around. It smartly emphasizes accessibility requirements like respecting prefers-reduced-motion and providing alternatives for urgent states. This is the kind of reference that keeps you from making notification badges that pulse forever and annoy everyone.
Install to Claude Code
npx -y skills add dylantarre/animation-principles --skill attention-grabbers --agent claude-codeInstalls to .claude/skills
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 →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →Files
SKILL.md
Select a file.
Featured
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 →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
