animation-recipes

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

این Skill مجموعه‌ای از recipeهای آماده برای سناریوهای رایج UI است؛ از فشردن دکمه و نمایش موفقیت تا ورود modal، تغییر صفحه، stagger لیست، hover کارت و انیمیشن فرم. هر recipe شامل duration، easing و اصول حرکتی مناسب برای پیاده‌سازی production-ready است.

پارامترها بر اساس emotion، محدودیت‌های brand، platform و accessibility تنظیم می‌شوند و برای web، video، موبایل و reduced motion راهنمایی مشخص دارند. این Skill کمک می‌کند سریع‌تر به موشن منسجم، قابل‌دسترس و سازگار با استانداردهای طراحی برسید.

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

recipeهای آماده برای feedback، navigation، content و form animation
مقادیر پیشنهادی duration، easing، stagger و اصول حرکتی
الگوهای جداگانه برای web، video، موبایل و reduced motion
قواعد تطبیق انیمیشن با شخصیت برند مانند elegant، professional و playful
چک‌لیست performance برای استفاده از transform، opacity و requestAnimationFrame

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

توسعه‌دهندگان frontend که برای تعاملات رایج به timing و easing مطمئن نیاز دارند
طراحان محصولی که می‌خواهند یک سیستم موشن منسجم برای UI تعریف کنند
تیم‌هایی که برای landing page، فرم، modal یا page transition به الگوی آماده نیاز دارند
پروژه‌های ویدیویی که باید transitionهای کوتاه و شروع فوری محتوا داشته باشند

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

ساخت انیمیشن‌های کاملاً سفارشی و پیچیده بدون استفاده از recipeهای رایج
پروژه‌هایی که به تولید مستقیم فایل ویدیویی یا کدنویسی کامل وابسته‌اند
موشن‌هایی که نیازمند art direction، illustration یا شخصیت‌پردازی اختصاصی هستند

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

Animation Recipes

Complete catalog of pre-built animation recipes for common UI scenarios. Each recipe combines duration, easing, and Disney principles into production-ready animations.

Choice Resolution

Recipes provide base values that get transformed through the resolution pipeline:

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

Resolution Order

Recipe provides base - duration, easing, principles
Emotion modifies - multiplies duration, may override easing
Brand constrains - caps exaggeration, may disable features
Platform adapts - applies duration multiplier (video = 0.6×)
Bounds clamp - enforces M3 limits (50-600ms web, 50-400ms video)
Accessibility overrides - reduced motion bypasses all above

Video Platform Integration

When platform === "video":

Parameter	Adjustment
Duration	× 0.6 (faster for engagement)
Max duration	400ms (not 600ms)
Intro delay	0ms (content on first frame)
Transitions	3-6 frames max

Worked Example

Input: success-notification + celebratory emotion + professional brand + video platform

1. Recipe base:      300ms, spring-bouncy
2. + Celebratory:    300 × 1.2 = 360ms
3. + Professional:   exaggeration capped to "subtle", no particles
4. + Video:          360 × 0.6 = 216ms
5. + Bounds:         216ms (within 50-400ms) ✓
6. Final:            216ms, spring-bouncy, subtle exaggeration

See choice-resolution/ skill for full algorithm.

Recipe Catalog

Feedback Animations

Button Press

Use case: Tactile feedback for button interactions

Property	Value
Duration	`short-4` (200ms)
Easing	`emphasized-decelerate`
Principles	Anticipation (micro), Squash-stretch (subtle)

Brand Constraints:

Elegant: No squash, subtle scale (0.98), caps exaggeration
Playful: Bounce with overshoot, scale 0.92 -> 1.05, allows all features
Bold: Quick snap, scale 0.95 -> 1.02, allows expressive effects

Success Notification

Use case: Celebratory feedback for completed actions

Property	Value
Duration	`medium-2` (300ms)
Easing	`spring-bouncy`
Principles	Anticipation, Squash-stretch, Follow-through, Secondary glow

Error Shake

Use case: Attention-grabbing error feedback

Property	Value
Duration	`short-3` (150ms)
Easing	`standard`
Principles	Exaggeration (moderate), Secondary color flash

Navigation Animations

Modal Entrance

Use case: Dialog/overlay appearance

Property	Value
Duration	`medium-1` (250ms)
Easing	`emphasized-decelerate`
Principles	Anticipation (micro), Staging, Backdrop secondary

Page Transition

Use case: Route change animations

Property	Value
Duration	`medium-2` (300ms)
Exit Easing	`emphasized-accelerate`
Enter Easing	`emphasized-decelerate`
Principles	Staging (shared-axis), Follow-through

Direction Patterns:

Forward: Exit left, enter from right
Backward: Exit right, enter from left
Up/Down: Vertical variants for hierarchical navigation

Content Animations

List Stagger

Use case: Multiple items entering sequentially

Property	Value
Duration	`medium-1` (250ms) per item
Stagger	50ms base (adaptive)
Easing	`emphasized-decelerate`
Principles	Follow-through (stagger), Overlap 30%

Adaptive Stagger Formula:

staggerDelay = min(50ms, max(25ms, 800ms / itemCount))

Card Hover

Use case: Interactive card states

Property	Value
Duration	`short-3` (150ms)
Easing	`standard-decelerate`
Principles	Exaggeration (subtle), Shadow secondary

Hero Reveal

Use case: Landing page hero entrance

Property	Value
Duration	`medium-3` (350ms) total
Easing	`emphasized-decelerate`
Principles	Anticipation, Staging, Cascading follow-through

Sequence:

Background fade (0ms)
Headline slide-up (100ms delay)
Subhead slide-up (200ms delay)
CTA scale-in (350ms delay)

Form Animations

Input Focus

Use case: Form field focus state

Property	Value
Duration	`short-3` (150ms)
Easing	`standard-decelerate`
Principles	Secondary label float, Border highlight

Checkbox Toggle

Use case: Checkbox state animation

Property	Value
Duration	`short-3` (150ms)
Easing	`emphasized-decelerate`
Principles	Anticipation (micro), Draw animation

Switch Toggle

Use case: Toggle switch animation

Property	Value
Duration	`short-4` (200ms)
Easing	`spring-snappy`
Principles	Squash-stretch, Follow-through (knob)

Recipe Selection Guide

By Interaction Type

Interaction	Recipe
Button click	`button-press`
Success feedback	`success-notification`
Error feedback	`error-shake`
Open dialog	`modal-entrance`
Close dialog	`modal-exit`
Navigate forward	`page-transition` (forward)
Navigate back	`page-transition` (backward)
Load list	`list-stagger`
Card interaction	`card-hover`
First impression	`hero-reveal`
Form focus	`input-focus`
Toggle state	`checkbox-toggle` or `switch-toggle`
Milestone	`celebration`

By Brand Personality (Constraints)

Brands apply constraints (caps and restrictions), not multipliers:

Brand	Max Exaggeration	Squash	Particles	Bounce
Elegant	subtle	✗	✗	✗
Professional	subtle	✗	✗	✗
Friendly	moderate	✓	✓	✓
Playful	expressive	✓	✓	✓
Bold	expressive	✓	✓	✓

By Device Context

Context	Adjustments
Mobile	Increase duration 1.1x, reduce distance
Tablet	Standard timing
Desktop	Standard timing
Low-end device	Simplify to opacity-only, reduce particles
Reduced motion	Use instant or fade-only variants

Video-Specific Guidelines

Scene Start Timing

CRITICAL: Videos should start with content immediately. Dead air at the beginning frustrates viewers.

Intro Type	Duration	Use
`immediate`	0ms	Default. Content appears on first frame.
`short`	200ms	Only after explicit audio cue.
`standard`	500ms	Maximum. Only for dramatic section breaks.

Between-Scene Transitions

Use video-specific durations (shorter than web):

Transition	Web Duration	Video Duration
Crossfade	300ms	100ms (3 frames)
Dissolve	400ms	150ms (5 frames)
Slide	400ms	200ms (6 frames)

Never use pixel dissolve for standard video transitions. It looks dated.

Typography Sizing

All video text must meet minimum size constraints:

Element	Base Size	Minimum
Title	80px	48px
Subtitle	32px	24px
Lower Third Name	28px	20px
Lower Third Title	18px	14px
Body	24px	18px
Caption	16px	14px

Celebration Effects

IMPORTANT: The celebration recipe requires explicit triggering. It should never auto-trigger.

When to use:

Milestone reached
Achievement unlocked
Task completed
Level up

When NOT to use:

Scene transitions
Background animations
Regular content entrances
Ambient effects

Performance Checklist

☐ Use will-change for animated properties
☐ Prefer transform and opacity over layout properties
☐ Use contain: layout for isolated animations
☐ Batch DOM reads and writes
☐ Use requestAnimationFrame for JS animations
☐ Test on low-end devices
☐ Provide reduced motion alternatives

Related Skills

choice-resolution - Unified parameter resolution pipeline
emotion-mapping - Map emotions to recipe parameters
component-animations - Component-specific recipes
easing - Easing curve selection for recipes
duration - Duration selection for recipes
platform-adaptation - Platform-specific adjustments
code-generation - Generate code from recipes

دانلود ZIP