orchestrator

توصیف ساده را به انیمیشن منسجم و کد آمادهٔ اجرا تبدیل می‌کند.

این Skill درخواست‌های متنی دربارهٔ انیمیشن را تحلیل می‌کند و عنصر، کنش، احساس، پلتفرم و هدف ارتباطی آن را تشخیص می‌دهد. سپس با ساختن مسیر روایی، ریتم صحنه، زنجیرهٔ پیامدها و وضعیت‌های کامپوننت، یک حرکت هدفمند و داستان‌مند طراحی می‌کند.

پارامترهای timing، easing، شدت و اصول Disney بر اساس برند، پلتفرم و محدودیت‌های دسترسی تنظیم می‌شوند. خروجی می‌تواند کد آماده برای CSS، GSAP، Framer Motion یا Remotion باشد و شامل حالت reduced motion و ملاحظات عملکردی نیز می‌شود.

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

• تحلیل خودکار نیت، احساس، عنصر و کنش از توضیح متنی
• انتخاب یا ترکیب recipe مناسب برای سناریوی انیمیشن
• تنظیم هماهنگ duration، easing، شدت و محدودیت‌های برند و پلتفرم
• طراحی narrative arc، attention path و زنجیرهٔ cause-and-effect
• کد production-ready برای CSS، GSAP، Framer Motion یا Remotion

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

• طراحی سیستم موشن منسجم برای محصول، Design System یا برند
• ساخت انیمیشن‌های معنادار برای تعامل‌هایی مثل موفقیت، خطا، راهنمایی و reveal
• تبدیل briefهای متنی و سطح‌بالا به کد قابل استفاده در وب، موبایل یا ویدیو

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

• تغییر بسیار جزئی در یک keyframe یا تنظیم دستی یک easing ساده
• پروژه‌هایی که فقط به انیمیشن تزئینی بدون هدف روایی یا تعاملی نیاز دارند
• زمانی که پلتفرم خروجی موردنیاز خارج از CSS، GSAP، Framer Motion و Remotion است

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

Motion Orchestrator

Autonomous decision engine for generating complete animations from high-level descriptions. The orchestrator parses input, applies narrative intentionality, resolves parameters via unified pipeline, selects appropriate Disney principles, and outputs production-ready code.

Orchestration Pipeline (v3.0 — Narrative + Resolution)

Input Description
       │
       ▼
┌──────────────────┐
│   Input Parser   │ → Extract: element, action, emotion, brand, platform
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  Intent Parser   │ → What PURPOSE? (clarify/guide/confirm/warn/celebrate/reveal)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  Journey State   │ → Where emotionally? (curious/engaged/accomplished)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  Narrative Arc   │ → What story phase? (exposition/rising/climax/resolution)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ Scene Composer   │ → Dramaturgical structure (beats, pauses, rhythm)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ Attention Path   │ → Reading order (F-pattern/Z-pattern/center-out)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  Consequence     │ → Cause-effect chains (direct/ripple/cascade/echo)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│   Microstate     │ → Component state machines (idle→active→success)
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ Recipe Matcher   │ → Find matching recipe or compose new
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│Parameter Resolver│ → Merge recipe + emotion + brand + platform
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│Principle Select  │ → Which Disney principles apply?
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│Conflict Resolver │ → Handle competing requirements
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ Code Generator   │ → Output for target platform
└────────┬─────────┘
         │
         ▼
   Complete Animation with Story

Narrative Layer (v3.0)

Intent Detection

Parse semantic purpose from the request:

Journey State Detection

Determine user's emotional position:

Arc Phase Selection

Map to Freytag's pyramid for UI:

Consequence Chain Selection

Phase 1: Input Parser

Element Detection

Action Detection

Emotion Detection

Phase 2: Parameter Resolution

Resolution Order

Recipe (base) → Emotion (modifier) → Brand (constraint) → Platform (adaptation) → Bounds → Accessibility (override)

Resolution Algorithm

function resolveParameters(
  recipe: Recipe,
  emotions: WeightedEmotion[],
  brand: Brand,
  platform: Platform,
  context: Context
): ResolvedParams {
  // 1. Start with recipe base
  let duration = recipe.duration;
  let easing = recipe.easing;
  let exaggeration = recipe.exaggeration ?? 1.0;

  // 2. Blend emotions (weighted average for numeric, dominant for discrete)
  const blendedEmotion = blendEmotions(emotions);

  // 3. Apply blended emotion as modifier
  if (blendedEmotion) {
    duration *= blendedEmotion.durationMultiplier;
    easing = blendedEmotion.easing ?? easing;
    exaggeration *= blendedEmotion.exaggerationBoost ?? 1.0;
  }

  // 4. Apply brand constraints (caps, not multipliers)
  if (brand) {
    exaggeration = Math.min(exaggeration, brand.maxExaggeration);
    if (!brand.allowsSquashStretch) squashStretch = "none";
  }

  // 5. Apply platform adaptation
  duration *= platform.durationMultiplier;

  // 6. Clamp to bounds
  duration = clamp(duration, platform.minDuration, platform.maxDuration);

  // 7. Accessibility override (bypasses all above)
  if (context.reducedMotion) {
    return recipe.reducedMotion ?? DEFAULT_REDUCED_MOTION;
  }

  return { duration, easing, exaggeration, ... };
}

Platform Multipliers

Resolution Checklist

• ☐ Emotions blended before applying (prevents stacking)
• ☐ Brand constraints enforced (caps exaggeration, disables features)
• ☐ Platform multiplier applied
• ☐ Duration clamped to bounds
• ☐ Reduced motion checked last (overrides all)

Phase 3: Principle Selection

Decision Tree

Does it bounce or impact?
  Yes -> SQUASH-STRETCH
  No  -> Skip

Does it move through space?
  Yes -> ARC-MOTION
  No  -> Linear path OK

Is it a significant action?
  Yes -> ANTICIPATION (15-25% of total)
  No  -> Skip

Are there secondary elements?
  Yes -> FOLLOW-THROUGH (10-30% stagger)
  No  -> Single element

Phase 4: Conflict Resolution

Priority Rules

1. Accessibility > Everything - Reduced motion always wins
2. Brand > Emotion - Brand consistency trumps momentary emotion
3. Context > Defaults - Device capability limits animations
4. Duration Conflicts - Average within brand bounds

function resolveConflicts(params: Parameters, context: Context): Parameters {
  if (context.reducedMotion) {
    params = applyReducedMotionLimits(params);
  }
  params = clampToBrandLimits(params, context.brand);
  params = clampToDeviceLimits(params, context.device);
  return params;
}

Phase 5: Output Generation

Platform Selection

Autonomous Generation Workflow

When generating animations autonomously:

1. Parse the request using keyword detection
2. Match to recipe or compose from principles
3. Apply emotion if specified or inferred
4. Apply brand constraints
5. Check accessibility requirements
6. Generate code for all platforms
7. Include reduced motion alternative
8. Document token references

Decision Checklist

• ☐ Element type identified
• ☐ Action type identified
• ☐ Platform identified (web/video/mobile)
• ☐ Emotion determined (explicit or inferred)
• ☐ Emotions blended if multiple
• ☐ Parameters resolved via resolution pipeline
• ☐ Brand constraints applied (caps, not stacking)
• ☐ Duration within platform bounds (50-600ms web, 50-400ms video)
• ☐ Intent parsed (clarify/guide/confirm/warn/celebrate/reveal)
• ☐ Journey state identified (curious/engaged/accomplished)
• ☐ Narrative arc selected (micro/short/medium/extended)
• ☐ Attention path planned (F-pattern/Z-pattern/center-out)
• ☐ Consequence chain defined (direct/ripple/cascade/echo)
• ☐ Microstate machine configured (component states + transitions)
• ☐ Disney principles selected
• ☐ Conflicts resolved
• ☐ Code generated for target platform
• ☐ Reduced motion included
• ☐ Performance considerations noted
• ☐ Determinism verified (same inputs = same outputs)

Related Skills

Core

• choice-resolution/ - Unified parameter resolution pipeline
• motion-principles/ - Disney 12 principles
• easing/ - Easing curve selection
• duration/ - Duration token selection
• accessibility/ - Reduced motion requirements
• animation-recipes/ - Recipe definitions and selection
• emotion-mapping/ - Emotion-to-parameter mapping
• platform-adaptation/ - Platform-specific adjustments
• tools/ - Platform-specific code generation

Narrative (v3.0)

• intent/ - Semantic motion purpose
• emotional-journey/ - User emotional state machine
• narrative-arc/ - Story structure for motion
• dramaturgy/ - Scene composition and pacing
• attention-choreography/ - Reading order and gaze paths
• consequence/ - Cause-effect animation chains
• microstate/ - Component state orchestration

See references/ for complete recipe matching tables and emotion mapping.

دانلود ZIP