From dylantarre-animation-principles
Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
You know the basics. Now let's understand how to actually use these 12 principles in your work.
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.
You know the basics. Now let's understand how to actually use these 12 principles in your work.
What it does: Gives weight and flexibility to objects. Try this: Animate a bouncing ball. Squash it 20-30% on impact, stretch it slightly at peak velocity.
What it does: Prepares the viewer for action. Try this: Before a character jumps, have them bend their knees. The bigger the anticipation, the bigger the expected action.
What it does: Directs attention clearly. Try this: Use silhouettes to test your poses. If you can't tell what's happening in shadow, restage it.
What it does: Two animation methods with different results. Try this: Use pose-to-pose for planned actions (walks, dialogue). Use straight ahead for wild, organic motion (fire, water).
What it does: Creates natural, fluid movement. Try this: After your character stops, let hair, clothes, and appendages continue moving for a few frames.
What it does: Adds weight and smoothness. Try this: Add extra frames at the start and end of movements. Fewer frames in the middle means faster motion.
What it does: Makes movement feel natural. Try this: Track your character's hand through a wave. It should draw a smooth curve, not zigzag.
What it does: Adds richness without distraction. Try this: A sad character might wipe their eye while talking. It supports the emotion without stealing focus.
What it does: Controls the mood and physics. Try this: Same action, different frame counts. 4 frames = snappy/light. 12 frames = heavy/deliberate.
What it does: Pushes reality for effect. Try this: Find the real movement, then push it 20% further. Scared? Eyes wider. Angry? Lean more forward.
What it does: Creates believable 3D forms. Try this: Draw your character from multiple angles. Maintain consistent volume throughout.
What it does: Makes characters watchable. Try this: Clear shapes, readable expressions, distinctive silhouettes. Avoid symmetry - asymmetry is more interesting.
Start with: Timing, Squash/Stretch, Anticipation Then add: Arcs, Follow Through, Slow In/Out Finally: Secondary Action, Staging, Appeal