Motion Designer
Specify UI and brand motion with Disney’s 12 animation principles so agents and designers ship intentional, polished movement.
Overview
Motion Designer is an agent skill most often used in Build (also Validate prototype, Launch distribution) that translates Disney’s 12 principles into motion specs for purposeful UI and brand animation.
Install
npx skills add https://github.com/dylantarre/animation-principles --skill motion-designerWhat is this skill?
- Applies Disney’s 12 principles (squash/stretch, anticipation, staging, follow-through, easing) to digital UI motion
- Covers straight-ahead vs pose-to-pose choices for organic vs choreographed sequences
- Stagger and overlapping-action guidance for lists, drawers, and navigation affordances
- Staging rules: one clear idea per scene and eye-path control via scale, position, and timing
- Anticipation patterns (e.g. button recoil, drawer shrink) before primary actions
- 12 Disney animation principles mapped to digital motion design
Adoption & trust: 807 installs on skills.sh; 44 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have screens and components but no shared motion language, so transitions feel arbitrary, jittery, or off-brand.
Who is it for?
Solo builders defining micro-interactions, onboarding sequences, or brand motion before coding animations.
Skip if: Teams that only need a one-off CSS keyframe with no system thinking, or pure backend/API work with no visual surface.
When should I use this skill?
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
What do I get? / Deliverables
You get principle-based motion direction—anticipation, staging, easing, and overlap—that engineers and agents can implement consistently across flows.
- Motion specification (timing, easing, staging per element)
- Principle-aligned notes for engineers or agents implementing transitions
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Motion specs and interaction choreography land when the product surface is being designed and implemented—canonical home is Build → frontend. Animation timing, easing, and staging attach to components, transitions, and layouts being built in the frontend layer.
Where it fits
Define how a prototype onboarding carousel eases and staggers slides before user testing.
Write anticipation and follow-through rules for modal open/close in your React component library.
Choreograph hero and CTA motion for a launch landing page or product video storyboard.
Align motion rhythm in in-app tooltips and lifecycle emails with the same staging principles.
How it compares
Use for motion-design methodology and specs—not as a charting library skill or automated Lottie exporter.
Common Questions / FAQ
Who is motion-designer for?
Indie builders, product designers, and agent users who want expressive UI motion grounded in classic animation craft without hiring a dedicated motion team.
When should I use motion-designer?
During Validate when prototyping feel and flow, in Build when specifying component transitions, and at Launch when polishing marketing or app-store preview motion—any time movement must communicate state and delight.
Is motion-designer safe to install?
It is editorial and procedural guidance with no required shell or network hooks; review the Security Audits panel on this Prism page before installing from any third-party repo.
SKILL.md
READMESKILL.md - Motion Designer
# 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. ### 5. Follow Through and Overlapping Action Nothing stops at once. Hair trails the head, fabric follows the body. Stagger element arrivals—faster elements lead, heavier ones lag. Creates rhythm and naturalism. ### 6. Slow In and Slow Out Ease into and out of poses. More frames near keyframes, fewer in motion. Bezier curves control this feel. Sharp curves = snappy. Gentle curves = graceful. ### 7. Arc Living things move in curves. Avoid robotic linear paths. Pendulum swings, hand gestures, eye movements—all arcs. Even UI elements feel more natural on curved paths. ### 8. Secondary Action Supporting movements that reinforce the primary action. While a character walks (primary), their coat sways (secondary). While a card opens, a shadow breathes. Adds depth without distraction. ### 9. Timing The heartbeat of animation. Fast timing = light, agile, comedic. Slow timing = heavy, dramatic, weighted. Vary timing for contrast. Consistent timing creates rhythm. ### 10. Exaggeration Push beyond reality for clarity and impact. Subtle exaggeration for UI: 110% scale. Bold exaggeration for character: stretched limbs, squashed faces. Match exaggeration to brand voice. ### 11. Solid Drawing Understand form, weight, and volume. Even 2D motion should feel three-dimensional. Maintain consistent perspective. Avoid "twins"—asymmetry adds life. ### 12. Appeal The charisma of design. Clear shapes, balanced proportions, appealing movement quality. Not just "pretty"—captivating. The viewer should want to keep watching. ## Design Deliverables - Motion style guides with easing curves - Timing specifications for developer handoff - Reference animations in After Effects or Principle - Reduced motion alternatives