@editframe/create 0.43.0 → 0.45.0

package/dist/skills/editframe-motion-design/references/3-attention.md

@@ -0,0 +1,350 @@
+---
+title: Attention
+description: Directing viewer attention with stagger, sequential choreography, and visual hierarchy in multi-element animations.
+type: explanation
+order: 3
+---
+
+# Attention Flow
+
+## Core Concept
+
+**One Focus at a Time**
+
+Human attention is sequential, not parallel. Motion competes for focus. Never animate unrelated elements simultaneously.
+
+## Quick Reference: Stagger Delays
+
+| Unit | Delay | Use Case |
+|------|-------|----------|
+| Character | 30-50ms | Text reveals, typing effects |
+| Word | 80-120ms | Headline emphasis |
+| Line | 200-300ms | Paragraph reveals |
+| List item | 50-80ms | Navigation, bullet lists |
+| Card | 100-150ms | Grid layouts, galleries |
+| Section | 400ms+ | Page sections, major blocks |
+
+## The Attention Rule
+
+**At any given moment, only ONE thing should be moving (or a group moving as a single conceptual unit).**
+
+### Bad (Simultaneous)
+```
+0ms: Title slides in (500ms)
+0ms: Subtitle fades in (500ms)
+0ms: Logo animates (500ms)
+```
+Result: Viewer doesn't know where to look, misses all three.
+
+### Good (Sequential)
+```
+0ms:   Logo animates (400ms)
+200ms: Title slides in (400ms) ← starts before logo finishes
+400ms: Subtitle fades in (300ms) ← starts before title finishes
+```
+Result: Clear attention path, overlapping reduces total time but maintains sequence.
+
+## Stagger: Rhythm Across Elements
+
+**Stagger = delay between identical animations**
+
+Creates rhythm and guides reading order without overwhelming attention.
+
+### Stagger Timing by Granularity
+
+| Unit | Delay | Use Case |
+|------|-------|----------|
+| Character | 30-50ms | Text reveals, typing effects |
+| Word | 80-120ms | Headline emphasis |
+| Line | 200-300ms | Paragraph reveals |
+| List item | 50-80ms | Navigation, bullet lists |
+| Card | 100-150ms | Grid layouts, galleries |
+| Section | 400ms+ | Page sections, major blocks |
+
+### Calculating Total Duration
+
+```
+Total = (NumItems - 1) × StaggerDelay + ItemDuration
+
+Example: 5 cards, 120ms stagger, 300ms animation
+Total = (5-1) × 120 + 300 = 780ms
+```
+
+**Keep total under 2 seconds** for UI. Beyond that feels slow.
+
+## Stagger Patterns
+
+### Sequential (Linear)
+```
+Item 1: 0ms
+Item 2: 100ms
+Item 3: 200ms
+Item 4: 300ms
+```
+Most common. Reads naturally (top→bottom, left→right).
+
+### Cascading (Accelerating)
+```
+Item 1: 0ms
+Item 2: 80ms   (80ms after previous)
+Item 3: 140ms  (60ms after previous)
+Item 4: 180ms  (40ms after previous)
+```
+Builds momentum, energetic feel. Use for dramatic reveals.
+
+### Wave (Center-out)
+```
+Item 1: 100ms  (center)
+Item 2: 50ms   (one step out)
+Item 3: 150ms  (one step out)
+Item 4: 0ms    (edge)
+Item 5: 200ms  (edge)
+```
+Focuses attention on center first, reveals context. Use when center is most important.
+
+### Decelerating (Slowing)
+```
+Item 1: 0ms
+Item 2: 50ms   (50ms after previous)
+Item 3: 120ms  (70ms after previous)
+Item 4: 220ms  (100ms after previous)
+```
+Gentle arrival, emphasizes final items. Use for settling into place.
+
+## Reading Order
+
+**Respect natural reading patterns unless intentionally disrupting:**
+
+### Western Reading (Left → Right, Top → Bottom)
+```
+Grid animation order:
+[1] [2] [3]
+[4] [5] [6]
+[7] [8] [9]
+```
+
+### Alternative Orders
+
+**Diagonal (energetic):**
+```
+[1] [2] [4]
+[3] [5] [7]
+[6] [8] [9]
+```
+
+**Column-by-column (technical/data):**
+```
+[1] [4] [7]
+[2] [5] [8]
+[3] [6] [9]
+```
+
+**Center-out (focal emphasis):**
+```
+[5] [2] [4]
+[7] [1] [3]
+[9] [6] [8]
+```
+
+## Overlapping vs Sequential
+
+### Full Sequential (Clear but Slow)
+```
+Item 1: 0-300ms
+Item 2: 300-600ms    ← starts when Item 1 ends
+Item 3: 600-900ms
+Total: 900ms
+```
+
+### Overlapping (Faster, Still Clear)
+```
+Item 1: 0-300ms
+Item 2: 120-420ms    ← starts at 40% of Item 1
+Item 3: 240-540ms
+Total: 540ms (40% faster)
+```
+
+**Optimal overlap: 30-50%** of item duration.
+
+Too much overlap → feels simultaneous, loses sequence.
+No overlap → feels sluggish, artificially delayed.
+
+## Grouping: Treating Multiple as One
+
+**Exception to "one focus" rule:** Elements that form a single conceptual unit can move together.
+
+### Valid Grouping
+```
+Title card contains:
+- Main headline
+- Subheadline
+- Decorative line
+
+All animate together as one unit.
+```
+
+### Invalid Grouping (Should be Separate)
+```
+Bad: Animating title AND background graphic together
+→ These aren't a conceptual unit
+→ Should be sequenced (background first, then title)
+```
+
+**Test:** Would a viewer naturally perceive these as one element or separate elements?
+
+## Attention Choreography Process
+
+### 1. List All Elements
+Identify everything that will move.
+
+### 2. Prioritize by Importance
+What must viewer see first, second, third?
+
+### 3. Determine Groups
+Which elements are conceptual units?
+
+### 4. Assign Sequence
+Create timeline respecting priority.
+
+### 5. Add Stagger Within Groups
+Apply appropriate delays for rhythm.
+
+### Example: Explainer Video Opening
+
+**Elements:**
+- Brand logo
+- Video title
+- Subtitle text
+- 4 key statistics
+- Background graphic
+
+**Priority:**
+1. Logo (establishes brand)
+2. Title (main message)
+3. Subtitle (supports title)
+4. Statistics (supporting data)
+5. Background (context)
+
+**Timeline at 30fps:**
+```
+0ms:     Logo animates (600ms / 18 frames)
+300ms:   Title slides in (400ms / 12 frames) ← 50% overlap
+500ms:   Subtitle fades in (300ms / 9 frames)
+700ms:   Stat 1 (300ms / 9 frames)
+800ms:   Stat 2 (300ms / 9 frames) ← 100ms stagger
+900ms:   Stat 3 (300ms / 9 frames)
+1000ms:  Stat 4 (300ms / 9 frames)
+1300ms:  Background subtle fade (600ms / 18 frames) ← ambient
+
+Total: 1900ms (~57 frames)
+```
+
+## Background Motion Exception
+
+**Ambient/background motion can run during foreground focus:**
+
+```
+Foreground: Title animates (400ms) ← PRIMARY FOCUS
+Background: Particle drift (continuous) ← ambient, not competing
+```
+
+**Requirements for background motion:**
+- Much slower than foreground (or continuous loop)
+- Very subtle (barely noticeable, 20-30% opacity)
+- Clearly secondary (out of focus, low contrast, or peripheral)
+- Enhances without distracting
+- Never competes with primary narrative elements
+
+## Anti-Patterns
+
+### Simultaneous Unrelated Motion
+```
+Bad:
+- Main title appears
+- Background changes
+- Lower third animates
+All at same time
+
+Fix: Sequence them. Background → wait 200ms → Title → wait 400ms → Lower third
+```
+
+### Too Many Staggers
+```
+Bad: 20 text lines with 200ms stagger = 4000ms (4 seconds!)
+Result: Feels sluggish, viewer loses interest
+
+Fix: 
+- Reduce stagger to 80ms (1600ms total)
+- Or: Group into 3 sets of lines, stagger sets not lines
+- Or: Only stagger first 5 lines, remaining fade in together
+```
+
+### Ignoring Reading Order
+```
+Bad: Grid animates right-to-left (against Western reading)
+Result: Feels backwards, unnatural
+
+Fix: Animate in reading order unless intentionally surprising
+```
+
+### False Grouping
+```
+Bad: Entire page (50+ elements) animates as one unit
+Result: Overwhelming, no guided attention
+
+Fix: Break into logical groups, sequence the groups
+```
+
+## Implementation Example
+
+**Text line reveal with stagger (30fps):**
+
+```javascript
+// In video composition at 30fps (33ms per frame)
+const lines = ['Line 1', 'Line 2', 'Line 3', 'Line 4'];
+const staggerFrames = 6;  // 6 frames = ~200ms at 30fps
+const durationFrames = 9; // 9 frames = ~300ms at 30fps
+
+lines.forEach((line, i) => {
+  const startFrame = i * staggerFrames;
+  const endFrame = startFrame + durationFrames;
+  
+  // Create keyframes for this line
+  animateLine(line, {
+    startFrame: startFrame,
+    endFrame: endFrame,
+    easing: 'ease-out'
+  });
+});
+
+// Total duration: (4-1) × 6 + 9 = 27 frames (~900ms at 30fps)
+```
+
+## Attention Budget
+
+**Users have limited attention. Spend it wisely.**
+
+**High attention cost:**
+- Large motion (200px+ movement)
+- Color changes
+- Multiple properties animating
+- Long duration (800ms+)
+
+**Low attention cost:**
+- Small motion (20px movement)
+- Opacity only
+- Brief duration (200ms)
+
+**Budget rule:** Reserve high-cost motion for primary actions. Use low-cost for secondary.
+
+## Testing Attention Flow
+
+**Watch the animation with these questions:**
+
+1. Where does my eye go at each moment?
+2. Is that where I *should* be looking?
+3. Do I understand the sequence of importance?
+4. Does anything compete for attention?
+5. Is the total duration comfortable?
+
+If any answer is no, revise the sequence.