narrative-arc

برای انیمیشن‌های معنادار، ساختار داستانی را به هر تعامل و ترنزیشن اضافه کنید.

این Skill با اقتباس از هرم فریتاگ، انیمیشن‌های UI را به قوس‌های روایی منسجم تبدیل می‌کند؛ از معرفی و اوج‌گیری تا نقطه اوج، فرود و پایان. برای تعامل‌های کوچک، تغییر وضعیت کامپوننت، ترنزیشن صفحه و تجربه‌های چندمرحله‌ای، زمان‌بندی و شدت مناسب پیشنهاد می‌دهد.

با استفاده از presetهای micro، short، medium و extended می‌توانید timelineهای قابل‌فهمی در GSAP یا Framer Motion بسازید. این Skill همچنین beatهای روایی، منحنی‌های تنش، انواع پایان‌بندی و پشتیبانی از prefers-reduced-motion را در نظر می‌گیرد.

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

• انتخاب قوس روایی مناسب برای تعامل‌های 300ms تا تجربه‌های 3 ثانیه‌ای
• تقسیم‌بندی دقیق animation timeline به exposition، rising action، climax، falling action و resolution
• الگوهای آماده برای micro-interaction، ورود Modal و ترنزیشن صفحه
• تعریف beatهایی مانند setup، build، payoff، surprise، breathe و echo
• راهنمای پیاده‌سازی در GSAP و Framer Motion همراه با حالت reduced motion

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

• طراحان و توسعه‌دهندگانی که می‌خواهند انیمیشن‌های UI هدفمند و داستان‌دار بسازند
• ترنزیشن‌های چندمرحله‌ای، onboarding، ارسال فرم، تغییر وضعیت و ورود یا خروج صفحه
• محصولاتی که به timing، شدت حرکت و تجربه کاربری قابل‌پیش‌بینی نیاز دارند

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

• انیمیشن‌های کاملاً تزئینی یا تک‌مرحله‌ای که به ساختار روایی نیاز ندارند
• پروژه‌هایی که فقط به محاسبه duration یا easing یک حرکت ساده نیاز دارند
• موشن‌گرافیک‌های سینمایی که به روایت‌پردازی مستقل و خارج از UI نیاز دارند

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

Narrative Arc

Apply dramatic story structure to animation sequences. Transform mechanical motion into meaningful narrative experiences using Freytag's pyramid adapted for UI motion.

Standards Reference

Quick Reference

Load from: tokens/narrative-arc.tokens.json

Arc Phases

Arc Presets

Selection Guide

What's the interaction scope?

├── Single element, instant feedback
│   └── micro arc (300ms)
│       └── Phases: incident → climax → resolution
│
├── Component state change
│   └── short arc (600ms)
│       └── Phases: exposition → rising → climax → resolution
│
├── View transition
│   └── medium arc (1200ms)
│       └── Full Freytag pyramid
│
└── Multi-step experience
    └── extended arc (3000ms)
        └── Full pyramid with breathing room

Narrative Arc Patterns

Micro Arc (Button Confirmation)

3-phase compressed structure for immediate feedback.

Timeline:

0ms ─────── 75ms ───────── 180ms ─────── 300ms
│ incident │    climax    │   resolution │
│   25%    │     35%      │     40%      │

Framer Motion:

const microArc = {
  incident: {
    scale: 0.95,
    transition: { duration: 0.075, ease: 'easeIn' }
  },
  climax: {
    scale: 1.1,
    transition: { duration: 0.105, type: 'spring', stiffness: 400 }
  },
  resolution: {
    scale: 1,
    transition: { duration: 0.12, ease: 'easeOut' }
  }
};

GSAP:

const tl = gsap.timeline();

tl.to(button, {
  scale: 0.95,
  duration: 0.075,
  ease: 'power2.in'
})
.to(button, {
  scale: 1.1,
  duration: 0.105,
  ease: 'back.out(2)'
})
.to(button, {
  scale: 1,
  duration: 0.12,
  ease: 'power2.out'
});

Short Arc (Modal Entrance)

4-phase structure for component transitions.

Timeline:

0ms ──── 90ms ──── 270ms ──── 420ms ──── 600ms
│  exp  │  rising │  climax  │  resolution │
│  15%  │   30%   │   25%    │     30%     │

Framer Motion:

const modalVariants = {
  hidden: { opacity: 0, scale: 0.9, y: 20 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: {
      duration: 0.6,
      times: [0, 0.15, 0.45, 0.70, 1], // Phase boundaries
      ease: [[0.05, 0.7, 0.1, 1]] // emphasized-decelerate
    }
  }
};

// Orchestrated with children
const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.15 // After exposition
    }
  }
};

Medium Arc (Page Transition)

Full 5-phase Freytag structure.

Timeline:

0ms ─ 144ms ─ 444ms ─ 660ms ─ 924ms ─ 1200ms
│exp │rising │climax │falling│ resolution │
│12% │  25%  │  18%  │  22%  │    23%     │

GSAP Timeline:

const pageTransition = gsap.timeline();

// Exposition: establish context
pageTransition.to('.current-page', {
  opacity: 0.8,
  scale: 0.98,
  duration: 0.144,
  ease: 'power1.out'
});

// Rising Action: build momentum
pageTransition.to('.current-page', {
  opacity: 0,
  x: -50,
  duration: 0.3,
  ease: 'power2.in'
}, '-=0.05');

pageTransition.fromTo('.next-page', {
  opacity: 0,
  x: 50
}, {
  opacity: 0.5,
  x: 25,
  duration: 0.3,
  ease: 'power2.out'
}, '-=0.2');

// Climax: maximum impact
pageTransition.to('.next-page', {
  opacity: 1,
  x: 0,
  scale: 1.02,
  duration: 0.216,
  ease: 'power3.out'
});

// Falling Action: energy dissipation
pageTransition.to('.next-page', {
  scale: 1,
  duration: 0.264,
  ease: 'power2.out'
});

// Resolution: content reveals
pageTransition.from('.next-page .content', {
  opacity: 0,
  y: 20,
  duration: 0.276,
  stagger: 0.05,
  ease: 'power2.out'
}, '-=0.15');

Beat Types

Story beats are discrete narrative moments within arcs.

Beat Sequence Example

// Form submission with narrative beats
const formSubmit = gsap.timeline();

// SETUP: Prepare for action
formSubmit.to('.submit-btn', {
  scale: 0.98,
  duration: 0.15,
  ease: 'power1.in'
});

// BUILD: Tension increases
formSubmit.to('.submit-btn .spinner', {
  opacity: 1,
  rotate: 360,
  duration: 0.2,
  ease: 'power2.inOut'
});

// PAYOFF: Success moment
formSubmit.to('.submit-btn', {
  backgroundColor: '#4CAF50',
  scale: 1.05,
  duration: 0.25,
  ease: 'back.out(2)'
});

// BREATHE: Let user absorb
formSubmit.to('.submit-btn', {
  duration: 0.4
});

// ECHO: Subtle reminder
formSubmit.to('.submit-btn', {
  scale: 1,
  duration: 0.2,
  ease: 'power2.out'
});

Tension Curves

How intensity builds across the arc.

Resolution Types

How narratives conclude.

Integration with Other Narrative Skills

Narrative Arc
     │
     ├── Provides: Phase structure, intensity, timing
     │
     └── Consumed by:
         ├── dramaturgy/ → Scene composition uses arc phases
         ├── consequence/ → Chain timing aligns with arc
         ├── emotional-journey/ → States map to arc phases
         └── intent/ → Intent intensity modulated by phase

Reduced Motion

For prefers-reduced-motion: reduce:

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

if (prefersReducedMotion) {
  // Replace arc with simple fade
  gsap.to(element, { opacity: 1, duration: 0.2 });
} else {
  // Full narrative arc
  playNarrativeArc(element);
}

Cross-References

• See dramaturgy/ for scene composition using arcs
• See emotional-journey/ for emotional state mapping to arc phases
• See intent/ for purpose-driven intensity within arcs
• See sequencing/ for timing multiple elements within arc phases
• See duration/ for base timing values

References

• references/freytag-pyramid.md — Dramatic structure theory
• references/beat-types.md — Story beat patterns

دانلود ZIP