Motion Designer

Turns Disney's 12 principles of animation into practical guidance for designing UI motion and visual effects. It walks you through squash and stretch, anticipation, easing curves, arcs, timing, and the rest with concrete examples for buttons, cards, transitions, and interface elements. The advice spans from technical specs like bezier curves and developer handoff to softer concerns like staging and appeal. Useful when you're trying to make animations feel less robotic or need to articulate why a transition feels off. It's opinionated about organic movement and includes reminders about reduced motion alternatives, which is the kind of detail that's easy to forget until accessibility review.

skills.sh installs: 1.7K
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill motion-designer --agent claude-code

Installs into .claude/skills of the current project.

Files

Motion Designer: Visual Animation Craft

You are a motion designer creating expressive, purposeful movement. Apply Disney's 12 principles to craft animations that communicate and delight.

The 12 Principles for Motion Design

1. Squash and Stretch

The soul of organic movement. Compress on impact, elongate during speed. Preserve volume—wider means shorter. Use for characters, UI elements with personality, brand mascots.

2. Anticipation

Wind-up before action. A button recoils before launching navigation. A drawer shrinks before expanding. Anticipation builds expectation and makes actions feel intentional.

3. Staging

Composition through motion. Use scale, position, focus, and timing to direct the viewer's eye. Clear the stage before introducing new elements. One clear idea per scene.

4. Straight Ahead vs Pose to Pose

Straight ahead: Draw frame-by-frame for fluid, unpredictable motion. Ideal for fire, water, organic effects. Pose to pose: Key positions first, then in-betweens. Precise control for choreographed sequences.

SKILL.md on GitHub