Attention Grabbers
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.
- skills.sh installs
- 565
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill attention-grabbers --agent claude-codeInstalls into .claude/skills of the current project.
Files
Attention-Grabbing Animations
Apply Disney's 12 principles to focus-drawing motion.
Principle Application
Squash & Stretch: Pulsing scale draws attention. 1.0 → 1.1 → 1.0 cycle catches peripheral vision.
Anticipation: Brief pause before attention animation. Let it build then release.
Staging: Position attention elements where users will see them. Corner badges, inline highlights.
Straight Ahead vs Pose-to-Pose: Design attention states: rest, active/pulsing, acknowledged.
Follow Through & Overlapping: Badge pulses, then count updates. Stagger the attention signals.
Slow In/Slow Out: Ease in/out on pulses. Smooth oscillation is less jarring than sharp bounces.
Arcs: Shake animations follow arc patterns. Left-right with slight vertical oscillation.
Secondary Action: Pulse + glow + color shift for maximum attention (use sparingly).
Timing:
- Single attention grab: 300-500ms
- Repeating pulse: 2000-3000ms cycle
- Urgent pulse: 1000-1500ms cycle
- Decay: Stop after 3-5 cycles or 10 seconds
Exaggeration: This is where exaggeration shines. Scale to 1.2, bright colors, bold motion.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Categories
- Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
Recommended
More Debugging
prose-stylejwynia/agent-skillsDiagnose sentence-level issues after structure is solid. Use when prose feels flat, sentences are monotonous, word choices are generic, or voice is inconsistent564skills.sh installs
ux-writingplugin87/ux-ui-agent-skillsWrite or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest564skills.sh installs
expressjs-developmentmanutej/luxor-claude-marketplaceComprehensive Express.js development skill covering routing, middleware, request/response handling, error handling, and building production-ready REST APIs562skills.sh installs
expopproenca/dot-skillsExpo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optima561skills.sh installs
function-creatorget-convex/agent-skillsCreate Convex queries, mutations, and actions with proper validation, authentication, and error handling. Use when implementing new API endpoints.560skills.sh installs
wasm-emscriptenmohitmishra786/low-level-dev-skillsWebAssembly with Emscripten skill for C/C++ to WASM compilation. Use when compiling C/C++ to WebAssembly with emcc, configuring EXPORTED_FUNCTIONS, understandin559skills.sh installs