motion-design

طراحی و پیاده‌سازی موشن استاندارد برای UI، وب، اپلیکیشن و ویدیو

این Skill برای ساخت انیمیشن‌های رابط کاربری، ترنزیشن‌های صفحه، micro-interaction، موشن‌گرافیک و ویدیو طراحی شده است. با ترکیب ۸۷ مهارت تخصصی، الگوها و توکن‌های آماده برای easing، duration، spring، sequencing، transform و افکت‌های بصری ارائه می‌دهد.

خروجی‌ها بر پایه‌ی W3C Design Tokens، Material Design 3 و Lottie Spec ساخته می‌شوند و با WCAG 2.1 و راهکارهای reduced motion سازگار هستند. این Skill همچنین ابزار مناسب مانند GSAP، Framer Motion، Lottie، Rive یا Remotion را بر اساس نوع پروژه انتخاب می‌کند.

چه چیزی می‌گیرید

انتخاب easing، duration، spring و الگوهای موشن بر اساس Material Design 3
طراحی انیمیشن برای کامپوننت‌ها، ترنزیشن صفحات، loading state، gesture و scroll
تولید یا پیشنهاد پیاده‌سازی با GSAP، Framer Motion، Lottie، Rive، Remotion یا CSS
استفاده از توکن‌های W3C DTCG برای ساخت سیستم موشن منسجم و قابل توسعه
بررسی دسترس‌پذیری، عملکرد و پشتیبانی از prefers-reduced-motion

برای چه کاری خوب است

تیم‌های طراحی و توسعه‌ای که به یک سیستم موشن یکپارچه برای محصول نیاز دارند
ساخت micro-interaction، ترنزیشن، انیمیشن scroll و الگوهای حرکتی برای وب یا اپلیکیشن
تولید ویدیو، kinetic typography، انیمیشن Lottie یا صحنه‌های Remotion
پروژه‌هایی که استانداردسازی توکن‌ها و رعایت دسترس‌پذیری در انیمیشن برایشان مهم است

برای چه کاری نیست

پروژه‌هایی که فقط به یک تغییر ساده‌ی CSS بدون نیاز به تصمیم‌گیری موشن نیاز دارند
مدل‌سازی سه‌بعدی کامل، رندر سینمایی سنگین یا شبیه‌سازی فیزیکی تخصصی خارج از محدوده‌ی UI و موشن
تولید خروجی نهایی در نرم‌افزارهای تجاری بدون فراهم‌کردن ابزار و محیط اجرای آن‌ها

دربارهٔ این اسکیل

Motion Design Agent

Motion design specialist grounded in industry standards. Creates animations by composing knowledge from specialized sub-skills and standardized token libraries.

Standards Compliance

This agent implements:

W3C Design Tokens (2025.10) for token interchange
Material Design 3 as primary motion baseline
Lottie Spec v1.0 for animation export
WCAG 2.1 for accessibility

Industry Context

Material Design 3 serves as the baseline because:

Most comprehensive public motion specification
Widely adopted across industry (referenced by Klarna, others)
Clear token naming conventions
Well-documented transition patterns

Cross-reference other systems when:

Building for Windows/Office → Fluent 2
Building for Apple platforms → Apple HIG
Building enterprise apps → Carbon (IBM)

Workflow

Parse — Identify animation type, platform, constraints
Select tokens — Load from tokens/*.tokens.json
Apply principles — Consult skills/motion-principles/
Choose pattern — Reference skills/transitions/ or skills/entrance-patterns/
Implement — Use appropriate tool (Remotion, GSAP, Framer Motion, Lottie)
Verify accessibility — Check skills/accessibility/

Token Library

All motion values are stored in W3C DTCG format (44 token files):

tokens/
├── motion.tokens.json         # Complete token set
├── easing.tokens.json         # Easing curves + springs
├── duration.tokens.json       # Duration scale
├── spring.tokens.json         # Spring physics
│
├── # Transform tokens
├── position.tokens.json       # Position and translation
├── scale.tokens.json          # Scale transforms
├── rotation.tokens.json       # Rotation and spin
├── skew.tokens.json           # Skew and slant
├── transform-origin.tokens.json # Transform origins
│
├── # Visibility tokens
├── opacity.tokens.json        # Opacity and fade
├── reveal.tokens.json         # Reveal patterns
├── blur.tokens.json           # Blur effects
│
├── # Orchestration tokens
├── sequencing.tokens.json     # Stagger and cascade
├── looping.tokens.json        # Loop patterns
├── procedural.tokens.json     # Procedural motion
│
├── # Disney principle tokens
├── anticipation.tokens.json   # Disney: anticipation
├── squash-stretch.tokens.json # Disney: squash-stretch
├── follow-through.tokens.json # Disney: follow-through
├── exaggeration.tokens.json   # Disney: exaggeration
│
├── # Effect tokens
├── particles.tokens.json      # Particle systems
├── distortion.tokens.json     # Glitch and distortion
├── glow-shadow.tokens.json    # Glow and shadow
├── reflection.tokens.json     # Reflections
├── texture.tokens.json        # Texture effects
├── motion-blur.tokens.json    # Motion blur
├── motion-path.tokens.json    # Motion paths
├── depth.tokens.json          # 3D depth
│
├── # Space and camera tokens
├── camera.tokens.json         # Camera movements
│
├── # Shape and path tokens
├── morphing.tokens.json       # Shape morphing
├── stroke.tokens.json         # Stroke animation
├── masks.tokens.json          # Mask animation
│
├── # Specialized tokens
├── typography.tokens.json     # Text animation
├── stylization.tokens.json    # Artistic styles
├── audio.tokens.json          # Audio-reactive
├── character.tokens.json      # Character animation
├── compositing.tokens.json    # Layer compositing
├── cinematic.tokens.json      # Cinematic effects
├── color.tokens.json          # Color animation
├── physics.tokens.json        # Physics simulation
├── playback.tokens.json       # Playback control
│
├── # Semantic tokens
├── emotion.tokens.json        # Emotion mapping
├── components.tokens.json     # UI components
├── recipes.tokens.json        # Animation recipes
└── export.tokens.json         # Export settings

Token references use W3C DTCG syntax: {motion.duration.medium-1}

Load tokens programmatically or reference by path in skill files.

Sub-Skill Index

Foundation Skills

Need	Skill	Standards Reference
Motion philosophy	`skills/motion-principles/`	M3, Carbon, Fluent
Easing curves	`skills/easing/`	W3C DTCG, M3, CSS, Apple HIG
Duration/timing	`skills/duration/`	W3C DTCG, M3, Apple HIG

Disney Principle Skills

Principle	Skill	Use Case
Anticipation	`skills/anticipation/`	Preparation before action
Squash & Stretch	`skills/squash-stretch/`	Weight and flexibility
Follow-Through	`skills/follow-through/`	Motion after main action
Secondary Action	`skills/secondary-action/`	Supporting animations
Exaggeration	`skills/exaggeration/`	Amplified motion
Arc Motion	`skills/arc-motion/`	Natural curved paths

Emotion Skills

Need	Skill	Standards Reference
Emotion-to-animation mapping	`skills/emotion-mapping/`	Arousal-valence model
Emotion token selection	`skills/emotion-selection/`	Token guidance

Pattern Skills

Need	Skill	Standards Reference
Page transitions	`skills/transitions/`	M3 transition patterns
Entrances	`skills/entrance-patterns/`	M3
Exits	`skills/exit-patterns/`	M3
Scroll animations	`skills/scroll-animations/`	GSAP ScrollTrigger

Component Skills

Need	Skill	Standards Reference
UI component animations	`skills/component-animations/`	M3 components
Pre-built recipes	`skills/animation-recipes/`	All patterns
Loading indicators	`skills/loading-states/`	WCAG 2.1
Touch/gesture motion	`skills/gesture-motion/`	Platform HIG

Implementation Skills

Need	Skill	Standards Reference
Lottie export	`skills/lottie/`	LAC Lottie Spec v1.0
Remotion video	`skills/remotion/`	Remotion docs
Code generation	`skills/code-generation/`	Platform-specific
Tool selection	`skills/tools/`	GSAP, Framer Motion, Rive
Export settings	`skills/export/`	Format, resolution, quality

Transform Skills

Need	Skill	Standards Reference
Position/translation	`skills/position/`	M3, CSS transforms
Scale transforms	`skills/scale/`	M3, squash-stretch
Rotation/spin	`skills/rotation/`	2D/3D rotation
Skew/slant	`skills/skew/`	CSS skew

Visibility Skills

Need	Skill	Standards Reference
Opacity/fade	`skills/opacity/`	M3
Reveal patterns	`skills/reveals/`	Mask reveals, wipes
Blur effects	`skills/blur/`	Motion blur, focus

Orchestration Skills

Need	Skill	Standards Reference
Stagger/cascade	`skills/sequencing/`	M3 stagger
Loops/oscillation	`skills/looping/`	Loop patterns
Procedural motion	`skills/procedural/`	Noise, wiggle

Effect Skills

Need	Skill	Standards Reference
Particles	`skills/particles/`	Confetti, snow, sparks
Distortion	`skills/distortion/`	Glitch, wave, ripple
Glow/shadow	`skills/glow-shadow/`	Neon, elevation
Reflections	`skills/reflection/`	Floor, water, glass
Textures	`skills/texture/`	Grain, noise, patterns

Space & Camera Skills

Need	Skill	Standards Reference
Camera movements	`skills/camera/`	Pan, tilt, dolly
Depth/3D space	`skills/depth/`	Z-axis, perspective

Shape & Path Skills

Need	Skill	Standards Reference
Shape morphing	`skills/morphing/`	Path interpolation
Stroke animation	`skills/stroke/`	Draw-on, dash
Mask animation	`skills/masks/`	Reveals, wipes

Specialized Skills

Need	Skill	Standards Reference
Kinetic typography	`skills/typography/`	Text animation
Micro-interactions	`skills/ui-micro/`	Buttons, toggles
Scroll storytelling	`skills/scrollytelling/`	Parallax, narrative
Attention direction	`skills/attention/`	Pulses, badges
Artistic styles	`skills/stylization/`	Vintage, minimalist
Audio-reactive	`skills/audio-reactive/`	Beat sync, visualizer
Character animation	`skills/character/`	Walk cycles, expressions

Production Skills

Need	Skill	Standards Reference
Layer compositing	`skills/compositing/`	Blend modes
Cinematic effects	`skills/cinematic/`	Letterbox, fades

Color & Physics Skills

Need	Skill	Standards Reference
Color animation	`skills/color/`	Hue, saturation, brightness
Physics simulation	`skills/physics/`	Gravity, bounce, springs

Control Skills

Need	Skill	Standards Reference
Playback control	`skills/playback-control/`	Speed, direction, scrubbing

Advanced Skills

Need	Skill	Standards Reference
3D transforms	`skills/3d-transforms/`	CSS 3D, WebGL
Motion blur	`skills/motion-blur/`	Performance-aware
Frame timing	`skills/frame-timing/`	Video standards

Quality Skills

Need	Skill	Standards Reference
Accessibility	`skills/accessibility/`	WCAG 2.1
Animation auditing	`skills/motion-audit/`	Performance, a11y
Testing patterns	`skills/testing-patterns/`	Testing frameworks
Platform adaptation	`skills/platform-adaptation/`	Cross-platform

Decision Framework

Easing Selection (M3 Baseline)

ENTERING → emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1)
EXITING  → emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15)
MOVING   → standard: cubic-bezier(0.2, 0, 0, 1)
LOOPING  → linear: cubic-bezier(0, 0, 1, 1)

Duration Selection (M3 Baseline)

Micro-interaction  → short1-short2 (50-100ms)
Small component    → short3-short4 (150-200ms)
Medium component   → medium1-medium2 (250-300ms)
Large transition   → medium3-medium4 (350-400ms)
Page transition    → long1-long2 (450-500ms)

Tool Selection

Pre-designed playback    → Lottie
Interactive/stateful     → Rive
Complex JS sequences     → GSAP
React declarative        → Framer Motion
Video rendering          → Remotion
Lightweight web          → CSS / Motion One
Scroll-triggered/linked  → GSAP ScrollTrigger or Intersection Observer

Reduced Motion Strategy

Standardized fallback taxonomy for all animations:

Animation Type	Reduced Motion Fallback
Entrance (fade + transform)	Instant opacity to 1, no transform
Exit (fade out)	Instant opacity to 0
State change (hover, press)	Instant state or opacity shift (0.9)
Loading (shimmer, pulse)	Static state, no animation
Error (shake)	Border/color indicator only
Celebration (particles, bounce)	Simple opacity fade
Page transition	Instant cut or cross-fade only

Platform Implementation

/* CSS */
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; transition: opacity 100ms ease; }
}

// JavaScript
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Framer Motion
import { useReducedMotion } from 'framer-motion';
const shouldReduce = useReducedMotion();

Output Requirements

All implementations must:

Use token names from tokens/ (not raw values)
Include reduced motion alternative
Specify which standard informed the decision
Provide code that imports from token files

Version History

v2.1.0 — Comprehensive motion design coverage
Added 11 new skills: color, physics, stylization, playback-control, reflection, skew, depth, texture, audio-reactive, character, export
Added 11 new token files for all new skills
New categories: color, physics, control
Total: 64 skills, 44 token files

v2.0.0 — Major expansion
Added 21 new skills across 8 new categories
Added 19 new token files (transforms, visibility, orchestration, effects, shape-path, specialized, production)
Added orchestrator skill for autonomous animation generation
Categories: transforms, visibility, orchestration, effects, space-camera, shape-path, specialized, production
Total: 53 skills, 33 token files

v1.2.0 — Cohesion & breadth improvements
Added manifest.json for skill/token discovery
Converted 19 flat skills to proper SKILL.md format
Added Apple HIG cross-references to easing/duration tokens
Refactored presets to import from token files
Added W3C DTCG token alias syntax
New skills: emotion-selection
New templates: FadeThrough, SharedAxis, StaggeredList (Remotion), spring-approximation, stagger-pattern, reduced-motion (CSS), loading-spinner, success-checkmark (Lottie)
Added skill-relationships.md for dependency mapping
Total: 30 skills, 14 token files, 3 presets, 12+ templates

v1.1.0 — Emotion springs, template variables, platform adapters, reduced motion strategy

v1.0.0 — Initial release with 14 skills and 8 token files

دانلود ZIP