From dylantarre-animation-principles
Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Nothing stops all at once. When a character halts, their hair keeps moving. When a car brakes, passengers lurch forward. Follow through and overlapping action capture how different parts of a system respond to forces at different rates—the principle that makes animation feel physically grounded.
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.
Nothing stops all at once. When a character halts, their hair keeps moving. When a car brakes, passengers lurch forward. Follow through and overlapping action capture how different parts of a system respond to forces at different rates—the principle that makes animation feel physically grounded.
Follow Through: When the main body stops, appendages continue moving due to momentum, then settle. The termination behavior of motion.
Overlapping Action: Different parts move at different rates throughout motion, not just at stops. Hair doesn't start moving when the head starts—it drags behind, then catches up. The continuous offset of timing.
Parts further from the root of motion drag more:
Each level follows the previous, creating cascading waves of motion.
Timing defines follow through duration: Fast stops = long follow through; slow stops = subtle settling.
Arcs govern the follow through path: Appendages swing through curved trajectories, not linear ones.
Secondary action is often follow through: The supporting motion that enriches without distracting.
Squash/stretch appears in settling: Objects compress slightly when follow through terminates.
For believable overlapping action, offset secondary elements by 2-4 frames (at 24fps) per level of hierarchy. Root moves on frame 1, primary on frame 2-3, secondary on frame 4-6, tertiary on frame 6-10.
Follow through should never snap to rest. Use ease-out curves with slight overshoot:
Identify all elements that could move independently. Assign each a drag value based on mass, flexibility, and distance from root. Apply timing offsets proportional to drag. Add settling oscillation to termination. When motion feels stiff, you probably need more overlapping action.