MCPInstall

universal-fallback

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

Installs
482
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/dylantarre/animation-principles --skill universal-fallback
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads universal-fallback automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Universal Animation Principles

Disney's 12 animation principles applied generically across any medium or context.

Quick Reference

PrincipleUniversal Application
Squash & StretchShow impact and flexibility
AnticipationPrepare before action
StagingDirect attention clearly
Straight Ahead / Pose to PoseContinuous vs keyframe approach
Follow Through / OverlappingElements complete at different rates
Slow In / Slow OutEase acceleration/deceleration
ArcNatural curved motion paths
Secondary ActionSupporting elements reinforce primary
TimingDuration affects perceived weight
ExaggerationPush for clarity and impact
Solid DrawingMaintain form and structure
AppealDesign for engagement and delight

The 12 Principles Explained

1. Squash & Stretch

Objects deform during action to show impact, weight, and flexibility. Volume remains constant—compression in one axis means expansion in another. The most important principle for showing life and physics.

Application: Anything with mass reacts to force. Soft objects deform more. Rigid objects show less but still respond. Use to show weight, speed, and material properties.

2. Anticipation

Preparation before the main action. Wind-up before pitch. Crouch before jump. Pullback before push. Prepares the audience for what's coming and makes action more readable.

Application: Major actions need setup. The bigger the action, the bigger the anticipation. Can be physical, visual, or timing-based. Skipping anticipation makes motion feel robotic.

3. Staging

Directing attention to what matters. Composition, contrast, motion, and timing work together to make intent clear. One clear idea per moment.

Application: Audiences can only focus on one thing at a time. Use all available tools (position, lighting, motion, timing) to make the important element unmistakable.

4. Straight Ahead & Pose to Pose

Two animation approaches. Straight ahead: draw frame-by-frame for fluid, spontaneous motion. Pose to pose: define key poses, then fill between for control and clarity. Most work combines both.

Application: Use straight ahead for dynamic, unpredictable motion. Use pose to pose for planned, precise sequences. Procedural/physics = straight ahead. Scripted = pose to pose.

5. Follow Through & Overlapping Action

Different parts of an object/character move at different rates and stop at different times. Nothing stops all at once. Overlapping creates natural, organic motion.

Application: Lead with the root/core, secondary elements follow. Heavier elements lag more. Lighter elements react faster. Creates complexity and believability.

6. Slow In & Slow Out

Objects accelerate and decelerate—they don't move at constant speed. More frames at start and end of motion, fewer in the middle. Creates natural, physics-based movement.

Application: Linear motion looks mechanical. Ease-in for exits, ease-out for entrances. Ease-in-out for contained motion. The curve defines the character of movement.

7. Arc

Natural motion follows curved paths, not straight lines. Joints rotate, creating inherent arcs. Thrown objects follow parabolas. Straight line motion is rare in nature.

Application: When something moves from A to B, the path between matters. Check motion paths—mechanical if straight, natural if curved. Exceptions: robots, specific mechanical effects.

8. Secondary Action

Supporting actions that reinforce the primary action without distracting from it. Facial expression supporting body language. Environmental response to character action.

Application: Primary action tells the story. Secondary actions enrich it. Secondary should never dominate. Remove secondary if it distracts from primary.

9. Timing

The number of frames/duration determines the feel of motion. Fewer frames = faster = lighter/snappier. More frames = slower = heavier/more deliberate. Timing is the foundation of personality.

Application: Experiment with timing to find the right feel. Context matters—same duration can feel fast or slow depending on expectations. Timing conveys weight, emotion, and energy.

10. Exaggeration

Push beyond reality for clarity and impact. Doesn't mean "unrealistic"—means amplifying the essence. More extreme poses, more dramatic timing, clearer staging.

Application: Reality can be subtle, unclear, boring. Animation clarifies reality by pushing what matters. Find the truth and amplify it. Different contexts allow different levels.

11. Solid Drawing

Understanding of form, weight, volume, and three-dimensional space. Objects maintain their structure during motion. Drawings have weight, balance, and depth.

Application: Things have mass and occupy space. Maintain consistency during animation. Understand the structure of what you're animating. Avoid unintentional distortion.

12. Appeal

The quality that makes audiences want to watch. Not just "cute"—can be appealing through design, personality, or movement. Characters and motion should be engaging.

Application: Design and animate for your audience. Create emotional connection. Motion should feel intentional and satisfying. Every choice should serve engagement.

Applying Principles

  1. Start with purpose: What must the audience understand/feel?
  2. Stage clearly: Direct attention to what matters
  3. Time appropriately: Duration affects everything
  4. Ease naturally: No linear motion in nature
  5. Anticipate actions: Prepare for major moments
  6. Follow through: Let motion complete naturally
  7. Add depth: Secondary action enriches primary
  8. Exaggerate clarity: Push to communicate
  9. Maintain structure: Respect form and physics
  10. Design appeal: Make it worth watching

These principles transcend medium. Master them, adapt them, apply them thoughtfully.

FAQ

What does the universal-fallback skill do?

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

How do I install universal-fallback?

Run npx skills add https://github.com/dylantarre/animation-principles --skill universal-fallback in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/universal-fallback/ (personal) or .claude/skills/universal-fallback/ (project).

Which AI agents can use universal-fallback?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is universal-fallback safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains universal-fallback?

It is published by dylantarre in dylantarre/animation-principles. It has 482 recorded installs.

More from dylantarre/animation-principles

View all →

video-motion-graphics

dylantarre/animation-principles

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.

Media & Creative2.4K installs

mobile-touch

dylantarre/animation-principles

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

Mobile2.4K installs

framer-motion

dylantarre/animation-principles

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

Frontend & Design1.7K installs

motion-designer

dylantarre/animation-principles

Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.

Frontend & Design1.6K installs

micro-interactions

dylantarre/animation-principles

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

Frontend & Design1.4K installs

web-motion-design

dylantarre/animation-principles

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.

Frontend & Design1.3K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs