Animation Principles - Novice — Claude Code skill: the 12 principles
A skill that walks through the 12 animation principles with a hands-on exercise for each. Useful once you know the theory and want to actually use it.
npx skills add dylantarre/animation-principles --skill animation-principles---novice -a claude-code
npx skills add dylantarre/animation-principles --skill novice -a claude-codeWhat Animation Principles - Novice does
The skill covers all 12 principles and pairs each one with something to try. Squash and stretch: compress a bouncing ball 20-30% on impact, stretch it slightly at peak velocity. Anticipation: bend the knees before a jump, and the bigger the wind-up, the bigger the action the viewer expects. Staging gets checked with silhouettes — if the pose reads as nothing in shadow, restage it.
Then come the methods and timing. Pose-to-pose is suggested for planned actions like walks and dialogue, straight ahead for fire and water. Slow in and slow out means extra frames at the start and end of a movement, fewer in the middle. The same action at 4 frames reads snappy and light, at 12 it reads heavy. Arcs, follow through, secondary action, exaggeration, solid drawing and appeal round out the list.
A practice order is spelled out: timing, squash/stretch and anticipation first, then arcs, follow through and slow in/out, and finally secondary action, staging and appeal. The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own command. It is a written guide with no scripts, so nothing beyond the skill itself is needed to use it.
What it helps with
- apply squash and stretch to a bouncing ball
- pick frame counts that give a movement the right weight
- test a character pose by its silhouette
- choose between pose-to-pose and straight ahead for a shot
- add follow through to hair and clothes after a stop
Example prompts for the agent
- Help me animate a bouncing ball — where do I squash and where do I stretch?
- How many frames should the impact take to feel heavy?
- Check my character pose as a silhouette and tell me what to restage
How to install Animation Principles - Novice
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill animation-principles---novice -a claude-codenpx skills add dylantarre/animation-principles --skill novice -a claude-code2Manually: put the files in place
~/.claude/skills/novice/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/novice/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill novice -a codex2Manually: put the files in place
.agents/skills/novice/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill novice -a cursor2Manually: put the files in place
.cursor/skills/novice/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles novice2Manually: put the files in place
.github/skills/novice/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill novice -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/noviceManually: put the files in place
.devin/skills/novice/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill novice -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 - Novice
How do I install Animation Principles - Novice in Claude?
Run npx skills add dylantarre/animation-principles --skill animation-principles---novice -a claude-code, then npx skills add dylantarre/animation-principles --skill novice -a claude-code. The skill file lands at ~/.claude/skills/novice/SKILL.md.
What does Animation Principles - Novice do?
It explains the 12 animation principles and gives an exercise for each: squash and stretch, anticipation, staging, timing, arcs, follow through and the rest. The focus is applying them to simple projects.
What order should I work through the principles?
Start with timing, squash/stretch and anticipation. Then add arcs, follow through and slow in/out. Finish with secondary action, staging and appeal.
Source text
SKILL.md · MIT
--- name: Animation Principles - Novice description: Use when someone has basic awareness of animation principles and wants to start applying them in simple projects --- # Building Your Animation Foundation You know the basics. Now let's understand how to actually use these 12 principles in your work. ## 1. Squash and Stretch **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. ## 2. Anticipation **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. ## 3. Staging **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. ## 4. Straight Ahead vs Pose to Pose **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). ## 5. Follow Through and Overlapping Action **What it does:** Creates natural, fluid movement. **Try this:** After your character stops, let hair, clothes, and appendages continue moving for a few frames. ## 6. Slow In and Slow Out **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. ## 7. Arc **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. ## 8. Secondary Action **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. ## 9. Timing **What it does:** Controls the mood and physics. **Try this:** Same action, different frame counts. 4 frames = snappy/light. 12 frames = heavy/deliberate. ## 10. Exaggeration **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. ## 11. Solid Drawing **What it does:** Creates believable 3D forms. **Try this:** Draw your character from multiple angles. Maintain consistent volume throughout. ## 12. Appeal **What it does:** Makes characters watchable. **Try this:** Clear shapes, readable expressions, distinctive silhouettes. Avoid symmetry - asymmetry is more interesting. ## Practice Order Start with: Timing, Squash/Stretch, Anticipation Then add: Arcs, Follow Through, Slow In/Out Finally: Secondary Action, Staging, Appeal
© dylantarre · MIT · dylantarre/animation-principles