From dylantarre-animation-principles
Use when animation feels wrong, creates unintended emotional response, or mismatches context
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Align animation emotion with context using Disney's principles.
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.
Align animation emotion with context using Disney's principles.
Issue: Animation lacks emotional resonance Fix: Define the emotional goal. Warm = soft easing, overshoot. Professional = crisp, linear. Match motion to message.
Issue: Wrong intensity for emotional context Fix: Serious contexts need restraint. Joyful contexts can be bouncy. Match exaggeration to emotional stakes.
Issue: Speed conflicts with emotional tone Fix: Calm emotions = slower. Excitement = faster. Tension = variable speed. Timing IS emotion.
Issue: Elastic effects on rigid contexts Fix: Squash/stretch implies playfulness and life. Remove for serious, clinical, or professional contexts.
Issue: Endings don't match emotional intent Fix: Abrupt endings feel harsh. Soft landings feel gentle. Bouncy endings feel playful. Choose consciously.
| Emotion | Easing | Timing | Effects |
|---|---|---|---|
| Joy | Bouncy overshoot | Fast | Squash/stretch, scale up |
| Calm | Gentle ease-out | Slow | Fade, subtle slide |
| Trust | Smooth, predictable | Medium | Minimal, consistent |
| Urgency | Sharp ease-in | Fast | Direct, no overshoot |
| Playful | Spring physics | Variable | Rotation, bounce |
| Serious | Linear or subtle ease | Slow | Minimal movement |
/* Calm/trustworthy */
--ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
/* Playful/joyful */
--ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Urgent/serious */
--ease-urgent: cubic-bezier(0.4, 0, 1, 1);