motion-sickness
🎯Skillfrom dylantarre/animation-principles
|Helps designers and animators identify and mitigate potential motion-induced discomfort in animations by analyzing movement patterns and recommending smoother, less jarring transitions.
Installation
npx skills add https://github.com/dylantarre/animation-principles --skill motion-sicknessSkill Details
Overview
# Animation Principles Skill Marketplace
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.
[](./docs/index.md)
[](./docs/index.md)
[](./LICENSE)
---
What is This?
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.
The 12 Principles
| # | 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 |
---
Installation
Claude Code Plugin
Add to your Claude Code settings:
```json
{
"plugins": [
"animation-principles@github:dylantarre/animation-principles"
]
}
```
Manual Installation
```bash
# Clone to your Claude plugins directory
git clone https://github.com/dylantarre/animation-principles.git \
~/.claude/plugins/animation-principles
```
Direct Use
You can also reference skills directly in conversations:
```
Use the animation-principles:joy-delight skill for this celebration animation
```
---
Skill Categories
By Application Domain
| Skill | Best For |
|-------|----------|
| [web-motion-design](docs/01-by-domain/web-motion-design.md) | CSS/JS web animations |
| [mobile-touch](docs/01-by-domain/mobile-touch.md) | Touch gestures, mobile patterns |
| [game-development](docs/01-by-domain/game-development.md) | Game UI and characters |
| [data-visualization](docs/01-by-domain/data-visualization.md) | Charts and data storytelling |
| [micro-interactions](docs/01-by-domain/micro-interactions.md) | Small, delightful moments |
By Role
| Skill | Best For |
|-------|----------|
| [frontend-developer](docs/03-by-role-persona/frontend-developer.md) | Code-first implementation |
| [motion-designer](docs/03-by-role-persona/motion-designer.md) | Professional motion design |
| [game-designer](docs/03-by-role-persona/game-designer.md) | Interactive game motion |
| [creative-director](docs/03-by-role-persona/creative-director.md) | High-level direction |
By Tool/Framework
| Skill | Technology |
|-------|------------|
| [css-native](docs/09-by-tool-framework/css-native.md) | Pure CSS animations |
| [framer-motion](docs/09-by-tool-framework/framer-motion.md) | Framer Motion (React) |
| [gsap-greensock](docs/09-by-tool-framework/gsap-greensock.md) | GSAP/GreenSock |
| [react-spring](docs/09-by-tool-framework/react-spring.md) | React Spring |
| [lottie-bodymovin](docs/09-by-tool-framework/lottie-bodymovin.md) | Lottie animations |
By Emotional Outcome
| Skill | Creates |
|-------|---------|
| [joy-delight](docs/06-by-emotional-outcome/joy-delight.md) | Happiness and surprise |
| [trust-relia
More from this repository10
Applies Anime.js animation library techniques to create fluid, dynamic web animations with Disney animation principles.
Helps Claude understand and analyze spatial relationships, movement trajectories, and dimensional positioning within animation design and motion graphics.
Enables Claude to generate and explain complex web animations using GreenSock Animation Platform (GSAP) with professional Disney animation principles.
game-designer skill from dylantarre/animation-principles
Guides Claude in applying professional motion design principles and techniques to create fluid, expressive, and purposeful animations across different design contexts.
universal-elements skill from dylantarre/animation-principles
scroll-animations skill from dylantarre/animation-principles
Animates notification toast messages with Disney-inspired animation principles, adding delightful, engaging micro-interactions to user interface alerts.
Generates animated icons and badges with Disney animation principles, applying techniques like squash, stretch, and anticipation to create dynamic visual elements.
orchestrated-sequences skill from dylantarre/animation-principles