From dylantarre-animation-principles
Use when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that energize, excite, and create dynamic, high-impact experiences.
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 energize, excite, and create dynamic, high-impact experiences.
Excitement builds through dynamic, escalating motion. Energy comes from fast, varied animations that create momentum and keep users engaged.
Dynamic and impactful (20-35%). High-energy compression and extension. Objects feel springy and responsive.
Quick, building tension (100-150ms). Like a coiled spring. The anticipation itself creates excitement.
Dynamic compositions. Diagonal lines, asymmetric layouts. Nothing static—energy in every arrangement.
Embrace for particle effects, explosions, and dynamic backgrounds. Energetic spontaneity.
Bouncy, energetic overshoot. Elements don't just stop—they rebound with vitality.
Aggressive acceleration curves. Fast starts, snappy stops. cubic-bezier(0.0, 0, 0.2, 1) for punch.
Dramatic, sweeping paths. High trajectories, dynamic curves. Motion that commands attention.
Abundant energy effects. Particles, trails, glows. The environment responds to exciting moments.
Fast and punchy (100-300ms). Rapid sequences. Variety in timing creates rhythm and energy.
High (25-40%). Push movements to feel impactful. Energy requires going beyond subtle.
Dynamic poses and forms. Lean into motion. Shapes that convey speed and force.
Bold, high-contrast design. Saturated colors. Dynamic angles. Visual energy.
| Element | Duration | Easing |
|---|---|---|
| Quick hit | 100-150ms | ease-out |
| Bounce | 300-400ms | spring |
| Reveal | 200-300ms | ease-out |
| Sequence step | 50-100ms | ease-out |
--energy-snap: cubic-bezier(0.0, 0, 0.2, 1);
--energy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--energy-punch: cubic-bezier(0.22, 1, 0.36, 1);
@keyframes energy-burst {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes energy-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
@keyframes energy-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}