Animation Principles - Master — Claude Code skill
This skill explains the reasoning behind 12 animation principles through perception, physics, emotion, and storytelling. Use it for teaching and mentorship.
npx skills add dylantarre/animation-principles --skill animation-principles---master -a claude-code
npx skills add dylantarre/animation-principles --skill master -a claude-codeWhat Animation Principles - Master does
The skill presents the philosophical basis of 12 animation principles. It connects squash and stretch with how people read motion, anticipation with prediction, and staging with limited focal attention. Follow through, arcs, and slow in/out are framed through physical consistency and the viewer’s sense that movement belongs to a rule-bound world.
It also contrasts pose-to-pose, where intent and choices are planned, with straight ahead, where behavior emerges during the process. Timing is treated as felt time shaped by emotion. Exaggeration fills in for context that animation cannot provide, while appeal draws on attention to faces, movement, contrast, and patterns.
The principles are brought together under one idea: believable change over time. This is a reasoning guide rather than a checklist, so its value depends on engaging with perception and storytelling instead of memorizing isolated rules.
What it helps with
- explain why animation principles work
- connect squash and stretch to motion perception
- compare pose-to-pose with straight ahead
- analyze how timing changes emotional impact
- teach the principles through visual psychology
Example prompts for the agent
- Explain the philosophical basis of animation principles through human perception and storytelling.
- Compare pose-to-pose and straight ahead as two working philosophies.
- Analyze why staging and anticipation make an action easier to read.
How to install Animation Principles - Master
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill animation-principles---master -a claude-codenpx skills add dylantarre/animation-principles --skill master -a claude-code2Manually: put the files in place
~/.claude/skills/master/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/master/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill master -a codex2Manually: put the files in place
.agents/skills/master/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill master -a cursor2Manually: put the files in place
.cursor/skills/master/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles master2Manually: put the files in place
.github/skills/master/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill master -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/masterManually: put the files in place
.devin/skills/master/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill master -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about Animation Principles - Master
How do I install Animation Principles - Master in Claude Code?
Run npx skills add dylantarre/animation-principles --skill animation-principles---master -a claude-code, then check ~/.claude/skills/master/SKILL.md.
What does Animation Principles - Master do?
It explains 12 animation principles through perception, physics, emotion, and storytelling. The skill focuses on why these techniques make change over time feel believable.
Why does the skill compare pose-to-pose and straight ahead?
The comparison presents two distinct ways to think about animation: pose-to-pose uses deliberate intent and choices, while straight ahead allows behavior to emerge during the work.
Source text
SKILL.md · MIT
--- name: Animation Principles - Master description: Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level --- # The Philosophy Behind the Principles Masters don't just apply principles - they understand their origins in human perception and storytelling. This is animation as visual psychology. ## Why the Principles Work ### Squash and Stretch: Persistence of Vision The eye blurs motion. Stretch simulates motion blur our brains expect. Squash simulates impact compression we've observed since infancy. We're matching internal neural predictions. ### Anticipation: Predictive Processing Human brains constantly predict next moments. Anticipation feeds this system information, making action legible. Without it, perception lags behind action. ### Staging: Attentional Bandwidth Humans have limited focal attention. Staging respects cognitive constraints. It's not artistic preference - it's information architecture for biological processors. ### Method Philosophy Pose-to-pose: Animation as acting - clear intentions, deliberate choices. Straight ahead: Animation as discovery - emergent behavior, organic evolution. Both philosophies are valid worldviews. ### Follow Through: Physics as Metaphor Objects with follow through feel like they exist in a world with rules. Rules create believability. Even cartoon physics must be internally consistent. ### Slow In/Out: Natural Motion Universals Almost nothing in nature moves at constant velocity. Ease reflects universal physics. It's not stylistic - it's the visual signature of mass and energy. ### Arcs: Gravitational Truth Pendulums, projectiles, limbs - rotation and gravity create curves. Arcs are motion's natural signature. Linear paths require explanation. ### Secondary Action: Cognitive Depth Humans assess situations through multiple channels simultaneously. Secondary action mimics this richness. Single-channel communication feels impoverished. ### Timing: Emotional Chronometry We feel time differently based on emotional state. Animation timing recreates these subjective time distortions. Fast isn't always fast - it's how fast *feels*. ### Exaggeration: Perceptual Compensation Animation lacks the subconscious information of reality - smell, peripheral vision, lived context. Exaggeration compensates for this perceptual deficit. ### Solid Drawing: Haptic Memory We've touched things our whole lives. Solid drawing activates this tactile memory. Flat drawings exist only visually; solid drawings exist in imagined space. ### Appeal: Evolved Attention We're wired to watch certain things: faces, movement, contrast, pattern. Appeal hijacks evolved attention systems. It's neuroaesthetics. ## The Unified Principle All 12 principles serve one master: **believable change over time**. They are observation and empathy codified. Animation is applied psychology drawn 24 times per second. Animation masters don't think in principles anymore. They think in emotion, story, truth. The principles become unconscious, like grammar to a poet.
© dylantarre · MIT · dylantarre/animation-principles