Animation Principles (Disney)
Claude Code marketplace of 144 skills teaching Disney’s 12 principles of animation applied to UI micro-interactions, games, loaders, and complex motion.
Overview
dylantarre/animation-principles packages Disney’s classic 12 principles into a Claude Code skill marketplace (12 categories × 12 skills). Use it when you want principle-named guidance—squash & stretch, anticipation, staging, arcs, slow-in/slow-out—mapped onto modern UI and product motion. Appears on Claude Marketplaces as web-motion-design / animation-principles. Complements LottieFiles Motion Design (director checklist) with deeper principle drills.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
Claude Code plugin settings:
json
{
"plugins": [
"animation-principles@github:dylantarre/animation-principles"
]
}Manual:
git clone https://github.com/dylantarre/animation-principles.git \
~/.claude/plugins/animation-principlesHow to use it
Invoke a principle-focused skill (or ask Claude to apply anticipation/staging/follow-through to a component). Use for UI micro-interactions, loaders, game-like moments, and motion education for design/eng pairs.
Example prompts
- “Apply anticipation and follow-through to this modal open/close.”
- “Use squash & stretch tastefully on this toggle—keep it professional SaaS.”
- “Stage the attention path for this onboarding checklist with animation principles.”
- “Rewrite this spinner using slow-in/slow-out and clearer staging.”
Use cases and examples
- Principle-driven micro-interactions
- Loading and success animation craft
- Teaching motion literacy to engineers
- Game-like UI feedback
- Motion critiques grounded in Disney vocabulary
Prerequisites
- Claude Code plugin support
- Basic familiarity with CSS/JS animation APIs
- Reduced-motion accessibility requirements
Tips
- Don't apply all 12 principles at once—pick 1–2 per interaction.
- UI ≠ character animation; keep deformations subtle.
- Pair with Motion Design (LottieFiles) for timing tables.
- Great learning pack—skim docs/index.md for the principle map.