From dylantarre-animation-principles
Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that motivate immediate response and communicate time-sensitivity.
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.
Create animations that motivate immediate response and communicate time-sensitivity.
Urgency creates a compelling need to act now. Action-driving animations capture attention, create momentum, and remove hesitation through dynamic, forward-moving motion.
Sharp, impactful deformations. Quick squash on landing (15-25%) creates impact. Fast stretch during motion shows speed and force.
Very short or none (0-50ms). Urgency means no time to prepare. Direct, immediate action. Skip wind-up for instant response.
Aggressive focus on call-to-action. High contrast, motion isolation. Everything else should recede. Spotlight the urgent element.
Creates unpredictable, attention-grabbing movement. Use for pulsing, shaking, or urgent indicator animations.
Minimal follow-through. Sharp stops communicate decisiveness. No lingering—immediate resolution drives action.
Asymmetric: fast start, abrupt end. ease-out with high initial velocity. cubic-bezier(0.0, 0, 0.2, 1) for aggressive acceleration.
Direct, linear paths for speed. Urgency takes the shortest route. Curved paths feel leisurely—use straight lines.
Attention-grabbing pulses, glows, or shakes. Badge counters that bounce. Subtle but persistent motion draws eyes.
Fast and punchy (100-200ms). Rapid animations create energy. Pulse intervals: 1-2 seconds to maintain attention without annoyance.
Moderate to high (20-40%). Amplified motion captures attention. Oversized bounces on notifications, emphasized shakes on errors.
Strong, bold forms. High-contrast shapes that command attention. No subtlety—clarity is paramount.
Bold colors (red, orange). Strong contrast. Asymmetric, dynamic compositions that feel active, not static.
| Element | Duration | Easing |
|---|---|---|
| Attention pulse | 150-200ms | ease-out |
| CTA bounce | 200-300ms | ease-out-back |
| Countdown tick | 100ms | linear |
| Error shake | 300-400ms | ease-in-out |
--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
@keyframes urgent-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes urgent-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
Use urgency honestly. Fake scarcity damages trust. Reserve for genuinely time-sensitive situations.