Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add dylantarre/animation-principles --skill animation-principles---master -a claude-code
npx skills add dylantarre/animation-principles --skill master -a claude-code
Open on GitHub

What 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-code
npx skills add dylantarre/animation-principles --skill master -a claude-code

2Manually: put the files in place

~/.claude/skills/master/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/master/

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

Similar skills

Everything for Design →

From the same set142

urgency-action Provides motion design guidelines for time-sensitive UI elements and calls to action. Helps animate timers and checkout buttons. CX Codex +1 499installs Animation Principles - Teaching Others Walks you through teaching the 12 animation principles to students, mentees or teammates: what to show first and where they usually get stuck. CX Codex +1 498installs user-feedback-clarity A skill that helps your coding agent work out why users miss interface feedback and what to change. CX Codex +1 498installs lists-grids Guides AI coding agents to animate lists, tables, and grids using Disney's 12 motion principles. Useful for filter states and reordering items. CX Codex +1 498installs power-confidence A skill that spells out how to animate strength and authority: heavy movement, sudden stops, almost no bounce. Useful for hero sections and premium product showcases. CX Codex +1 497installs continuous-loops Guides AI agents in creating looping CSS animations with Disney motion principles. Useful for spinners, pulse indicators, typing dots, and ambient effects. CX Codex +1 497installs universal-patterns Sets baseline durations, easing curves and the 12 animation principles for any motion in an interface. Useful when your agent writes CSS transitions and guesses the timing wrong. CX Codex +1 496installs secondary-action-mastery A skill for adding secondary motion that supports the primary action instead of fighting it. Useful for UI animation and game feel. CX Codex +1 496installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor