From dylantarre-animation-principles
Use when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Timing is the number of frames (or milliseconds) an action takes. It's deceptively simple—just duration—yet it communicates weight, emotion, and energy more powerfully than any other principle. Change the timing, change the meaning.
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.
Timing is the number of frames (or milliseconds) an action takes. It's deceptively simple—just duration—yet it communicates weight, emotion, and energy more powerfully than any other principle. Change the timing, change the meaning.
Physical communication: Timing tells us about mass and force. Heavy objects start slow, stop slow. Light objects respond instantly. A bowling ball and a balloon falling the same distance—timing alone differentiates them.
Emotional communication: Timing tells us about character state. Sluggish timing reads as tired, depressed, or massive. Snappy timing reads as alert, nervous, or lightweight.
At 24fps (film standard):
At 60fps (UI/games), multiply by 2.5 for equivalent feels.
Physical timing: Governed by mass, gravity, and force (objective) Theatrical timing: Governed by story needs and emotional beats (subjective) Musical timing: Governed by rhythm and tempo (structural) UI timing: Governed by responsiveness and user perception (functional)
Slow in/slow out is timing's texture: The overall duration and the internal spacing work together.
Anticipation affects timing perception: A long wind-up makes subsequent action feel faster.
Staging uses timing for hierarchy: Important elements move on different timing than subordinate ones.
Exaggeration often means timing exaggeration: Stretched holds, compressed actions.
Timing gains meaning through contrast. A fast action feels fast because something before it was slow. A held pose feels dramatic because motion surrounds it. Monotonous timing lacks emphasis.
Create timing systems where relationships are consistent:
Systematic timing feels cohesive; random durations feel chaotic.
One of timing's most powerful tools is the absence of motion. Held poses create:
Never underestimate the power of stillness.
Start with 200-300ms as default duration for standard interactions. Adjust based on: mass (heavier = longer), distance (further = longer), importance (crucial = longer to register), emotional tone (playful = snappier). When something feels "off," timing is often the culprit—experiment with 50% shorter and 50% longer before other adjustments.