Notifications Toasts

This covers Disney's 12 animation principles applied specifically to notification toasts, which is surprisingly helpful if you're tired of alerts that just pop in with no finesse. You get timing recommendations (200-300ms enter, 150-250ms exit), easing functions including a bouncy cubic-bezier, and the idea of sequencing secondary actions like icon animations and progress bars after the main container lands. The anticipation principle is clever: shrink the toast to 95% scale for 100ms before auto-dismiss so users aren't surprised when it disappears. It's opinionated about things like using arcs for corner slides and matching animation intensity to urgency, which saves you from having to figure out those details yourself.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill notifications-toasts --agent claude-code