From dylantarre-animation-principles
Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Map Disney's 12 principles to any emotional goal through systematic analysis.
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.
Map Disney's 12 principles to any emotional goal through systematic analysis.
Any emotion can be achieved through intentional application of animation principles. This framework helps translate emotional intent into specific motion parameters.
Identify your target on these spectrums:
| Principle | Low Energy | High Energy |
|---|---|---|
| Squash & Stretch | 0-10% | 20-40% |
| Anticipation | 50-100ms | 150-300ms |
| Timing | 400-800ms | 100-250ms |
| Exaggeration | 0-15% | 25-50% |
| Follow Through | Extended settle | Quick bounce |
| Principle | Serious | Playful |
|---|---|---|
| Arc | Direct/Linear | Curved/Bouncy |
| Secondary Action | Minimal | Abundant |
| Straight Ahead | Avoid | Embrace |
| Appeal | Clean/Geometric | Round/Organic |
| Emotion Type | Easing Style | Example |
|---|---|---|
| Calm | Symmetric ease | ease-in-out |
| Confident | Strong ease-out | cubic-bezier(0,0,0.2,1) |
| Playful | Overshoot | cubic-bezier(0.34,1.56,0.64,1) |
| Urgent | Sharp ease-out | cubic-bezier(0.0,0,0.2,1) |
| Elegant | Extended ease | cubic-bezier(0.4,0,0.6,1) |
:root {
/* Adjust based on target emotion */
--emotion-duration: 300ms;
--emotion-easing: cubic-bezier(0.4, 0, 0.2, 1);
--emotion-squash: 1;
--emotion-overshoot: 0;
}
Real experiences blend emotions. Layer principles: