From dylantarre-animation-principles
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.
Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.
Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.
Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.
Simple icons use pose-to-pose (two states). Complex icon animations (morphing) can use straight-ahead for organic transitions.
Bell ring continues after user interaction stops. Badge number updates before badge bounce settles. Multi-part icons offset timing.
Icon hover: ease-out. Icon click: ease-in-out. Bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55) for overshoot.
Bell swinging follows pendulum arc. Refresh icons spin in true circular arcs. Arrows can arc during state changes.
While icon scales (primary), color changes (secondary), glow pulses (tertiary). Badge count changes while badge bounces.
Celebratory icons (confetti, hearts) can be very animated. Functional icons (menu, close) should be subtle. Match purpose.
Icons must remain crisp at all animation frames. Maintain stroke consistency. Badge numbers should be legible during motion.
Animated icons add personality. A bouncing notification feels alive. A pulsing status feels responsive. Small touches matter greatly.
.icon-btn:hover .icon {
transform: scale(1.15);
transition: transform 150ms ease-out;
}
.icon-btn:active .icon {
transform: scale(0.9);
transition: transform 50ms ease-in;
}
.badge {
animation: badgeBounce 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes badgeBounce {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.status-indicator {
animation: pulse 2000ms ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.bell-icon:hover {
animation: ring 500ms ease-in-out;
}
@keyframes ring {
0%, 100% { transform: rotate(0); }
20%, 60% { transform: rotate(15deg); }
40%, 80% { transform: rotate(-15deg); }
}
transform: scale, rotateopacity: pulse effectsanimation: complex sequencesfill/stroke: SVG color changesfilter: glow effects