From dylantarre-animation-principles
Use when enriching primary animations, adding supporting details, creating depth in motion, or making scenes feel alive without distracting from main action.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Secondary action adds life to a scene without distracting from the main action. A character walking (primary) while whistling and swinging their arms (secondary). A button pressing (primary) with a subtle ripple effect (secondary). It's the difference between functional animation and rich, immersive motion.
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.
Secondary action adds life to a scene without distracting from the main action. A character walking (primary) while whistling and swinging their arms (secondary). A button pressing (primary) with a subtle ripple effect (secondary). It's the difference between functional animation and rich, immersive motion.
Subordination principle: Secondary action must never compete with primary action. If viewers watch the secondary instead of primary, you've failed. The supporting role must remain supporting.
Reinforcement function: Good secondary action reinforces the primary action's meaning. It doesn't just add motion—it adds dimension to the story being told.
These are often confused:
Overlapping is reactive; secondary is additive.
Emotional reinforcement: Nervous fidgeting during dialogue, triumphant fist pump after scoring Environmental response: Clothes rippling in wind, breath visible in cold Character business: Adjusting glasses, playing with hair, drumming fingers Ambient life: Background characters, environmental animation, idle behaviors
Staging determines secondary action visibility: Secondary must stay subordinate in composition.
Timing offsets prevent competition: Secondary often runs on different timing than primary.
Overlapping action often becomes secondary: The physics-driven motion enriches without distracting.
Follow through provides transition: Secondary action settles as primary action completes.
Minimal (professional contexts): 10-20% amplitude of primary action Moderate (consumer products): 30-40% amplitude Expressive (entertainment, games): 50-60% amplitude Theatrical (cartoons, celebrations): 70%+ amplitude
Match to context and brand personality.
Animate with secondary action, then temporarily remove it. If the scene feels dead, the secondary is working. If you don't notice it's gone, it was probably too subtle—or unnecessary.
For every primary action, ask: "What else would be moving, reacting, or happening?" Add the single most valuable secondary action. Only add more if the first doesn't create competition. Time secondary action to offset from primary—either starting slightly before, during hold phases, or in the settling aftermath.