Motion Design
Apply choreography rules—hero-led entry, stagger, counter-motion, and sequence timing—when implementing UI motion in product or marketing surfaces.
Overview
Motion-design is an agent skill most often used in Build (also Launch distribution) that teaches coordinated UI choreography—hero-led entry, stagger, counter-motion, and phased sequences—for solo builders implementing an
Install
npx skills add https://github.com/lottiefiles/motion-design-skill --skill motion-designWhat is this skill?
- Coordinated entry rules: hero-first displacement, shared spatial origin, and counter-motion speed ratios
- Three-phase sequence structure (setup 20–30%, action 30–40%, resolution 30–40%) with 100–200ms post-resolution stillness
- 1/3 distance and concurrency caps to avoid chaotic long travels or too many simultaneous movers
- Stagger patterns: sequential, center-out, and random for lists, grids, and organic effects
- Counter-motion table pairing hero motion with background, shadow, and ambient reactions
- Three sequence phases with 20–30% setup, 30–40% action, and 30–40% resolution
- 1/3 screen distance cap without intermediate keyframes
- Max one-third of elements active simultaneously when three or more animate
Adoption & trust: 2.2k installs on skills.sh; 184 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want polished motion in your app or landing page but ad-hoc keyframes produce chaotic direction mixes, too many elements moving at once, and no clear hero moment.
Who is it for?
Indie builders adding Lottie-style or CSS motion to product UI, onboarding flows, or launch pages who need systematic stagger and hero/counter-motion rules.
Skip if: Teams that only need static design tokens with zero animation, or backends/API work with no visual motion layer.
When should I use this skill?
User is implementing or specifying UI motion and needs choreography rules for entry, stagger, counter-motion, or multi-element sequences.
What do I get? / Deliverables
Your agent applies consistent choreography rules—timing phases, stagger patterns, and 1/3 caps—so implemented motion reads as one directed scene instead of unrelated tweens.
- Choreography spec aligned to hero/counter-motion and stagger tables
- Keyframe or implementation guidance respecting phase timing shares
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Motion choreography is authored while building interfaces and animated experiences, which is the canonical Build shelf for implementation guidance. Rules govern on-screen element timing, spatial origin, and stagger on the client, which maps directly to frontend motion work.
Where it fits
Prototype a landing hero with center-out stagger so stakeholders judge motion quality before full Build.
Implement dashboard card entry using sequential stagger and 1/3 concurrent element cap.
Animate a launch promo block with hero-first displacement and shadow counter-motion on the marketing site.
How it compares
Use instead of asking the agent for generic “make it animate” prompts without timing, origin, or concurrency constraints.
Common Questions / FAQ
Who is motion-design for?
Solo and indie builders shipping web or mobile products who implement UI motion and want choreography rules the agent can follow consistently.
When should I use motion-design?
During Build frontend work when implementing transitions and stagger; at Launch when animating hero sections and promotional surfaces; and during Validate prototypes when you need motion that already feels production-grade.
Is motion-design safe to install?
Review the Security Audits panel on this Prism page and the skill package source before installing; the documented content is procedural design guidance without required shell or network access in the excerpt.
SKILL.md
READMESKILL.md - Motion Design
# Choreography ## Coordinated Entry Rules ### 1. Lead with the Hero - Hero gets largest displacement and most attention-grabbing easing - Supporting elements are subtler in every dimension ### 2. Spatial Origin Consistency All elements enter from same direction or shared origin. Mixed directions = chaos. ### 3. Counter-Motion | Hero Motion | Counter-Motion | Speed Ratio | |-------------|---------------|-------------| | Enters left | Background shifts right | 20-30% | | Scales up | Shadow scales down | 10-20% | | Rotates CW | Ambient drifts CCW | 15-25% | | Lifts (Y up) | Shadow spreads + softens | 20-30% | ## Sequence Structure | Phase | Duration Share | What Happens | |-------|--------------|-------------| | Setup | 20-30% | Elements enter, scene establishes | | Action | 30-40% | Primary motion, hero moment | | Resolution | 30-40% | Settle, secondary reactions, breathing | Leave 100-200ms stillness after resolution before new motion. ## The 1/3 Rules **Distance**: No motion travels >1/3 screen without intermediate keyframe. Break with direction changes, speed variations, or arc adjustments. **Elements**: With 3+ animated elements, max 1/3 active simultaneously. Stagger so element 1 settles as element 3 starts. ## Stagger Patterns | Pattern | Description | Best For | |---------|------------|----------| | Sequential | Reading order | Lists, grids | | Center-out | Radiating from center | Hero content, ripples | | Random | Varied timing | Organic, particle-like | | Wave | Sine-based | Data bars, continuous | | Reverse | Bottom-to-top | Exits, backward nav | - All staggered elements use same easing family - Vary only start time, not curve - Optional: last element gets slight overshoot (punctuation) ## Shared Motion Events When multiple elements react to one trigger: - All start within 50ms of each other - Can arrive at different times (staggered landing) - Same easing family; motion originates from trigger point ## Attention Direction | Technique | Implementation | |-----------|---------------| | Leading motion | Animate target before context | | Following motion | Settle on focal point | | Ambient motion | Subtle continuous in periphery | | Pointing motion | Directional toward CTA | ### Depth Through Speed | Layer | Displacement | Speed | |-------|-------------|-------| | Foreground | 1.0x | Fastest | | Midground | 0.5x | Medium | | Background | 0.2x | Slowest | ## Common Recipes ### Dashboard Load 1. Skeletons fade in (100ms) 2. Hero metric (250ms, ease-out, 100ms delay) 3. Supporting cards stagger (50ms between, 200ms each) 4. Chart data draws in (300ms, starts with cards) 5. Ambient pulse on primary metric ### Modal Open 1. Background dims (200ms) 2. Modal scales 95%→100% + fades (300ms, 50ms delay) 3. Content fades in (200ms, 100ms after modal) 4. Close button last (150ms) ### List Update (item added) 1. Existing items shift down (200ms, ease-in-out) 2. New item fades+slides from top (250ms, ease-out, 50ms delay) 3. Subtle scale overshoot on land (3-5%) # Context Adaptation ## Platform Scaling | Platform | Duration Modifier | Complexity | Physics | |----------|------------------|------------|---------| | Desktop | 1.0x (baseline) | Full | All types | | Tablet | 0.9x | Standard | Most types | | Mobile | 0.8x | Reduced (1-2 properties) | Snappy only | | Watch | 0.6x | Minimal (1 property) | None | | TV/Kiosk | 1.3x | Full | All types | **Mobile rules**: prefer opacity + transform; touch feedback <100ms; reduce stagger budgets by 30%; avoid parallax **Desktop opportunities**: hover states, cursor tracking, multi-column stagger, spatial choreography ## Accessibility ### prefers-reduced-motion | Original Motion | Reduced Alternative | |----------------|-------------------| | Slide entrance | Opacity fade only | | Bounce/spring | Instant or simple ease-out | | Parallax | Static positioning | | Auto-playing | Paused, user-initiated | | Complex choreography | Single fade | | Continuous ambient | Static