By dylantarre
Apply Disney's 12 animation principles to any animation task—UI micro-interactions, game feel, data viz, mobile gestures, or branding—with timing, easing, accessibility, and implementation patterns for CSS, React, Figma, Unity, and native platforms.
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Give Claude the superpower of a Disney animator.
A comprehensive collection of 144 Claude Code skills that teach Disney's 12 Principles of Animation and ways to apply them across every context, tool, and scenario imaginable.
This is a skill marketplace for Claude Code that transforms Claude into a Disney animation expert. Whether you're building UI micro-interactions, game animations, loading states, or complex motion sequences, these skills provide contextual guidance rooted in the timeless principles that made Disney animation legendary.
There are 12 sets of 12 skills each. Use this to give Claude animation powers in any scenario or to learn more yourself.
| # | Principle | What It Does |
|---|---|---|
| 1 | Squash & Stretch | Shows weight and flexibility through deformation |
| 2 | Anticipation | Prepares the viewer for what's coming |
| 3 | Staging | Directs attention to what matters |
| 4 | Straight Ahead / Pose to Pose | Two approaches to creating movement |
| 5 | Follow Through / Overlapping | Parts move at different rates |
| 6 | Slow In / Slow Out | Natural acceleration and deceleration |
| 7 | Arc | Organic curved motion paths |
| 8 | Secondary Action | Supporting movements that reinforce |
| 9 | Timing | Speed conveys weight and emotion |
| 10 | Exaggeration | Push beyond reality for clarity |
| 11 | Solid Drawing | Maintain volume and consistency |
| 12 | Appeal | Charisma that draws viewers in |
Add to your Claude Code settings:
{
"plugins": [
"animation-principles@github:dylantarre/animation-principles"
]
}
# Clone to your Claude plugins directory
git clone https://github.com/dylantarre/animation-principles.git \
~/.claude/plugins/animation-principles
You can also reference skills directly in conversations:
Use the animation-principles:joy-delight skill for this celebration animation
| Skill | Best For |
|---|---|
| web-motion-design | CSS/JS web animations |
| mobile-touch | Touch gestures, mobile patterns |
| game-development | Game UI and characters |
| data-visualization | Charts and data storytelling |
| micro-interactions | Small, delightful moments |
| Skill | Best For |
|---|---|
| frontend-developer | Code-first implementation |
| motion-designer | Professional motion design |
| game-designer | Interactive game motion |
| creative-director | High-level direction |
| Skill | Technology |
|---|---|
| css-native | Pure CSS animations |
| framer-motion | Framer Motion (React) |
| gsap-greensock | GSAP/GreenSock |
| react-spring | React Spring |
| lottie-bodymovin | Lottie animations |
| Skill | Creates |
|---|---|
| joy-delight | Happiness and surprise |
| trust-reliability | User confidence |
| urgency-action | Immediate action |
| elegance-sophistication | Premium feel |
| Skill | Level |
|---|---|
| absolute-beginner | First introduction |
| intermediate | Working knowledge |
| expert | Professional mastery |
| teaching-others | How to teach |
Use animation-principles:absolute-beginner
Use animation-principles:frontend-developer
Use animation-principles:framer-motion
Token generators, component patterns, accessibility guidance, and framework integrations
npx claudepluginhub dylantarre/animation-principlesUI/UX design intelligence. 84 styles, 161 palettes, 73 font pairings, 25 charts, 17 stacks (React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, Three.js). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
This skill should be used when users need to generate ideas, explore creative solutions, or systematically brainstorm approaches to problems. Use when users request help with ideation, content planning, product features, marketing campaigns, strategic planning, creative writing, or any task requiring structured idea generation. The skill provides 30+ research-validated prompt patterns across 14 categories with exact templates, success metrics, and domain-specific applications.
Develop, test, build, and deploy Godot 4.x games with Claude Code. Includes GdUnit4 testing, web/desktop exports, CI/CD pipelines, and deployment to Vercel/GitHub Pages/itch.io.
A growing collection of Claude-compatible academic workflow bundles. Covers scientific figures, manuscript writing and polishing, reviewer assessment, citation retrieval, data availability, paper reading, literature search, response letters, paper-to-PPTX conversion, and evidence-grounded Chinese invention patent drafting. Rules are organized as reusable skill folders with explicit workflows and quality checks.
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.