From dylantarre-animation-principles
Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that entertain, surprise, and make interactions genuinely enjoyable.
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 entertain, surprise, and make interactions genuinely enjoyable.
Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile.
Generous, exaggerated (25-40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball.
Exaggerated wind-ups (150-250ms). Comic timing—big preparation for big payoff. Elements "think" before acting.
Theatrical presentation. Clear setup and punchline. Give playful moments room to breathe and be noticed.
Embrace spontaneity. Wobbly paths, unpredictable bounces. Characters and elements with minds of their own.
Extensive, bouncy follow-through. Overshoots, wobbles, and settling. Like a cartoon character skidding to a stop.
Asymmetric with overshoot. Quick starts, bouncy landings. cubic-bezier(0.68, -0.55, 0.265, 1.55) for elastic effect.
Exaggerated, bouncy curves. High arcs for jumps. Squiggly paths for personality. Nothing moves in straight lines.
Abundant! Wiggles, sparkles, expressions. Elements react to each other. The whole interface feels alive.
Varied and expressive (100-500ms). Quick snaps, slow anticipation. Comic timing with beats and pauses.
High (30-50%). Push movements to cartoon levels. Impossible physics that feel emotionally true.
Maintain appeal through deformation. Stretched elements stay charming. Volume shifts for effect.
Round, friendly shapes. Bright, saturated colors. Big eyes, expressive forms. Character in everything.
| Element | Duration | Easing |
|---|---|---|
| Bounce | 400-600ms | spring(1, 60, 8) |
| Wiggle | 300-400ms | ease-in-out |
| Pop | 150-250ms | ease-out-back |
| Squash | 100-150ms | ease-out |
--play-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--play-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
--play-wobble: cubic-bezier(0.45, 0.05, 0.55, 0.95);
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
@keyframes boing {
0% { transform: scale(1); }
30% { transform: scale(1.25, 0.75); }
50% { transform: scale(0.85, 1.15); }
70% { transform: scale(1.05, 0.95); }
100% { transform: scale(1); }
}