Skip to main content 홈 크리에이터 lottiefiles motion-design-skill motion-design
motion-design Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... name motion-design description Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
license MIT metadata {"author":"LottieFiles","version":"1.0.0"}
Motion Design Skill
When to Apply
Use this skill when:
Creating UI animations (buttons, cards, modals, page transitions)
Designing micro-interactions and feedback animations
Building loading, success, or error states
Animating illustrations or decorative elements
Planning scroll-triggered or progress-based animations
Establishing brand motion identity
Choreographing multi-element sequences
Decision tree:
Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
Does it express brand personality? → Motion Personality archetypes
Does it tell a story or guide attention? → Disney principles + choreography
Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
Quick Reference: 8-Step Checklist
Before creating any animation:
Emotional target? — joy, calm, urgency, elegance
Motion Personality? — Playful, Premium, Corporate, Energetic
Primary property? — position, scale, rotation, opacity
Duration? — see duration table below
Easing family? — entrance=decelerate, exit=accelerate
Hero element? — apply staging principles
Secondary + ambient layers? — add richness
1/3 rules? — motion distance, simultaneous elements
Three Pillars (CRITICAL) Every animation must satisfy three pillars before any technical decisions:
Pillar Question Drives Emotional Intent What should the viewer FEEL? Easing, timing, amplitude Visual Narrative What's the micro-story? Setup → Action → Resolution Motion Craft How do we make it believable? Physics, secondary motion, paths
Three motion layers (flat animation = missing layers):
Primary : Main action the viewer followsSecondary : Supporting richness (shadows, icons shifting)Ambient : Background life (gradients, subtle pulses)
Motion Personality Select ONE archetype per project. Apply consistently.
Archetype Duration Easing Overshoot Keywords Playful 150-300ms ease-out-back 10-20% fun, whimsical, bouncy, cute Premium 350-600ms cubic-bezier(0.4,0,0.2,1) 0% elegant, minimal, luxury, sophisticated Corporate 200-400ms cubic-bezier(0.2,0,0,1) 0-3% clean, professional, business, dashboard Energetic 100-250ms ease-out-expo 15-30% dynamic, energetic, bold, exciting
Default : Corporate for UI, Playful for illustrations.
Brand Motion Identity — define three constants:
Signature easing : One curve for 80% of animationsDuration palette : 3 durations (quick / standard / slow)Entrance pattern : One consistent entry style
Property Selection Effect Goal Primary Property Secondary Properties Entrance/Exit position opacity, scale Emphasis/Attention scale rotation (subtle), opacity pulse State Change opacity, color scale (press feedback) Direction/Flow position rotation (follow path) Depth/3D Feel scale + shadow position (parallax) Loading/Progress rotation (spinner) scale, opacity pulse Success scale (pop) color, rotation (checkmark draw) Error/Alert position (shake) color, rotation (wobble)
Simplicity threshold : Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.
Duration Table Element Type Duration Rationale Tooltip / micro-feedback 80-120ms Must feel instant Button press / toggle 120-180ms Responsive feedback Icon transition 150-250ms Clear state change Card enter / exit 200-350ms Spatial awareness Modal / dialog 300-400ms Focus shift Page transition 400-600ms Context switch Dramatic reveal 600-1200ms Theatrical build
Distance scales duration : 100px = base. 200px = 1.3x. 400px = 1.6x.
Enter > Exit : Entrances 30-50% longer than exits. Users care about what appears.
Hover: <100ms
Press: <150ms
Release/settle: 200-300ms
Error shake: 300-400ms (2-3 oscillations)
Easing Selection
Entrance → decelerate (fast start, gentle landing): ease-out familyExit → accelerate (gentle start, fast departure): ease-in familyOn-screen → smooth both ends: ease-in-out familyLooping ambient → seamless: sine-based ease-in-out Standard Cubic Bezier Use For Material Design 3 (0.2, 0, 0, 1) Default on-screen MD3 Emphasized (0.05, 0.7, 0.1, 1) Entrances, attention MD3 Accelerate (0.3, 0, 1, 1) Exits, dismissals Apple HIG (0.25, 0.1, 0.25, 1) Standard iOS Snappy UI (0.2, 0, 0, 1) Fast, decisive Gentle float (0.4, 0, 0.2, 1) Ambient, background Bounce settle (0.175, 0.885, 0.32, 1.275) Overshoot, playful
Material Duration Scale Overshoot Rigid (metal, stone) 1.2x 0% Elastic (rubber, gel) 0.8x 15-25% Fluid (water, paint) 1.5x 5% Paper (cards, sheets) 1.0x 3-5% Gas (smoke, fog) 2.0x 0% Glass (brittle) 0.9x 0%
Common Patterns
Button Press (Playful)
Anticipation : Scale to 0.97 (50ms, ease-out)Squash : Scale to [1.04, 0.96] (100ms, ease-in)Follow through : Overshoots to 1.02, settles to 1.0 (spring, 200ms)Secondary : Shadow shrinks during press, icon shifts down 2pxTotal : ~150ms press + 200ms settle
Card Entrance (Premium)
Start : 20px below target, opacity 0Path : Slight curve (10px X offset at midpoint)Easing : ease-out-cubic decelerationFollow through : Shadow arrives 50ms after cardSecondary : Content fades in 100ms after card landsStaging : Other cards dim to 80%
Success State (Playful)
Primary : Scale pop with ease-out-backSecondary : Checkmark draws inAmbient : Subtle particle burstColor : Green fillTotal : 300-400ms
Error Shake (Corporate)
Primary : Position oscillates 2-3 times, ±10-15px horizontalEasing : ease-in-out for sharp stopsColor : Red tintTotal : 300-400msNo overshoot : Errors feel firm
Choreography Essentials
Lead with the hero — primary element enters first or most prominently
Spatial consistency — all elements enter from same direction
Counter-motion — hero moves right → ambient moves left at 20-30% speed
1/3 Rule (distance) : No motion travels more than 1/3 of screen without a keyframe change.
1/3 Rule (elements) : With 3+ elements, no more than 1/3 in active motion simultaneously.
Pattern Delay Total Budget Use Case Micro cascade 20-40ms <200ms List items, grid cells Standard 50-100ms <400ms Cards, panels, nav Dramatic 100-200ms <600ms Hero sections Wave 30-60ms <500ms Data visualizations
Critical : Total stagger must stay under 500ms.
Emotion-to-Motion Map Emotion Character Path Easing Duration Joy Bouncy, arcs Curved, upward ease-out-back 200-400ms Calm Smooth, flowing Gentle curves sine ease-in-out 500-1000ms Urgency Sharp, fast Straight lines ease-out 100-200ms Sadness Slow, downward Drooping curves cubic ease-in-out 600-1200ms Surprise Sudden, expanding Radial outward ease-out-expo 150-300ms Elegance Slow, controlled Long arcs (0.4,0,0.2,1) 400-700ms Playfulness Bouncy, irregular Arcs, squiggly ease-out-back 200-350ms
Path as language : Angular = tense. Curved = friendly. Spiral = whimsical. Diagonal = purposeful. Vertical = growth/weight. Horizontal = progress.
Weight Classification Weight Examples Duration Overshoot Easing Heavy Modals, overlays 300-500ms 0% Gentle, high damping Medium Cards, panels 200-350ms 3-5% Moderate Light Tooltips, badges, icons 80-200ms 5-15% Responsive
Quality Rules
CRITICAL — never break
Never linear for spatial movement — always use easing curves (linear only for spinners, progress bars)Never opacity-only for important state changes — combine with position or scaleNever exceed 1/3 screen without intermediate keyframeAlways three motion layers — primary + secondary + ambient
HIGH — strongly follow
Match duration to element type (see tables)
Use directional easing (ease-out entrance, ease-in exit)
Apply Disney principles (especially anticipation, follow-through)
Maintain consistent personality across scene
Troubleshooting Quick Reference Problem Likely Cause Fix Looks robotic Linear easing or no arcs Add easing curves + arc paths Feels too slow Duration too long for element type Check duration table, use ease-out Feels cheap/flat Missing secondary + ambient Add shadow motion + background life Too distracting Too many elements moving Apply 1/3 rule, reduce amplitude No personality Generic easing everywhere Apply personality archetype consistently
File Reference 