@editframe/create 0.44.0 → 0.45.1

package/dist/skills/editframe-brand-video-generator/references/transition-styles.md

@@ -0,0 +1,611 @@
+---
+title: Transition Styles
+description: Types of video transitions — cut, dissolve, wipe, and motion — their emotional impact, and when to apply each.
+type: reference
+order: 4
+---
+
+# Transition Styles
+
+Types of transitions, their emotional impact, and when to use them in video.
+
+## Why Transitions Matter
+
+Transitions are not just technical necessities - they:
+- **Guide attention**: Direct viewer's eye to what's next
+- **Set pacing**: Control the rhythm and energy
+- **Create meaning**: Suggest relationships between scenes
+- **Express brand**: Reflect personality and style
+
+The wrong transition can break immersion; the right one enhances the story.
+
+## Transition Categories
+
+### Cut (No Transition)
+
+**Description**: Instant change from one shot to another  
+**Duration**: 0s (immediate)  
+**Emotional impact**: Direct, urgent, energetic, modern  
+**Cognitive load**: Low (brain processes easily)
+
+**When to use**:
+- Fast-paced content
+- Related scenes in same context
+- Modern, energetic brands
+- Social media content
+- When you want invisible editing
+
+**When to avoid**:
+- Slow, contemplative content
+- Dramatic scene changes
+- Luxury/premium brands (can feel cheap)
+- When viewer needs time to process
+
+**Brand personalities**: Bold, modern, energetic, direct, youthful
+
+**Example usage**:
+```
+Scene 1: Product feature A (3s)
+[CUT]
+Scene 2: Product feature B (3s)
+[CUT]
+Scene 3: Product feature C (3s)
+```
+
+---
+
+### Fade
+
+#### Fade to Black
+**Description**: Scene gradually darkens to black, then next scene fades in  
+**Duration**: 0.5-2s  
+**Emotional impact**: Dramatic, final, chapter-ending, contemplative  
+**Cognitive load**: Medium (signals major shift)
+
+**When to use**:
+- End of major section
+- Significant time passage
+- Dramatic emphasis
+- Before title cards
+- Emotional moments that need space
+
+**When to avoid**:
+- Between related scenes
+- Fast-paced content
+- When momentum needs to continue
+
+**Brand personalities**: Dramatic, cinematic, serious, traditional
+
+#### Fade to White
+**Description**: Scene gradually brightens to white, then next scene fades in  
+**Duration**: 0.5-1.5s  
+**Emotional impact**: Hopeful, clean, dreamy, ethereal, fresh start  
+**Cognitive load**: Medium
+
+**When to use**:
+- Transitions to positive outcomes
+- Dream sequences or aspirational content
+- Clean, minimal brands
+- Healthcare, wellness content
+- "New beginning" moments
+
+**When to avoid**:
+- Dark, serious content
+- Dramatic moments
+- When you need weight/gravity
+
+**Brand personalities**: Clean, hopeful, minimal, wellness, aspirational
+
+#### Cross Fade (Dissolve)
+**Description**: First scene fades out while second fades in (overlap)  
+**Duration**: 0.5-2s  
+**Emotional impact**: Smooth, gentle, connected, contemplative  
+**Cognitive load**: Low to medium
+
+**When to use**:
+- Related scenes
+- Time passage (not dramatic)
+- Smooth, flowing content
+- Emotional content
+- When scenes are thematically connected
+
+**When to avoid**:
+- Fast-paced content
+- When you need energy
+- Unrelated scenes
+
+**Brand personalities**: Smooth, sophisticated, gentle, thoughtful, premium
+
+---
+
+### Slide Transitions
+
+#### Slide Left/Right
+**Description**: Next scene slides in from side, pushing current scene out  
+**Duration**: 0.3-0.8s  
+**Emotional impact**: Progressive, forward-moving, sequential  
+**Cognitive load**: Low (natural reading direction)
+
+**When to use**:
+- Sequential content (step 1, 2, 3)
+- Timeline progressions
+- Before/after comparisons
+- Horizontal relationships
+- Modern, clean brands
+
+**When to avoid**:
+- When direction doesn't match meaning
+- Slow, contemplative content
+- Too frequently (becomes repetitive)
+
+**Brand personalities**: Modern, progressive, organized, systematic
+
+**Directional meaning**:
+- **Right to left**: Progress, moving forward (Western cultures)
+- **Left to right**: Going back, rewinding
+
+#### Slide Up/Down
+**Description**: Next scene slides in from top or bottom  
+**Duration**: 0.3-0.8s  
+**Emotional impact**: Revealing, building, hierarchical  
+**Cognitive load**: Low
+
+**When to use**:
+- Revealing information
+- Building upward (growth, success)
+- Hierarchical relationships
+- Mobile-optimized content
+- Vertical video formats
+
+**When to avoid**:
+- When direction doesn't match meaning
+- Desktop-primary content
+
+**Brand personalities**: Modern, dynamic, growth-focused
+
+**Directional meaning**:
+- **Bottom to top**: Building, growing, rising, positive
+- **Top to bottom**: Descending, revealing, authoritative
+
+---
+
+### Push Transitions
+
+**Description**: Next scene pushes current scene out of frame  
+**Duration**: 0.3-0.8s  
+**Emotional impact**: Assertive, confident, replacing  
+**Cognitive load**: Low
+
+**When to use**:
+- Strong transitions between distinct topics
+- Confident, bold brands
+- When new content replaces old
+- Modern, dynamic content
+
+**When to avoid**:
+- Gentle, subtle content
+- When scenes are closely related
+- Luxury/premium brands (can feel aggressive)
+
+**Brand personalities**: Bold, confident, modern, assertive
+
+---
+
+### Zoom Transitions
+
+#### Zoom In
+**Description**: Camera zooms into detail, which becomes next scene  
+**Duration**: 0.5-1s  
+**Emotional impact**: Focus, discovery, diving deeper  
+**Cognitive load**: Medium
+
+**When to use**:
+- Moving from overview to detail
+- Discovering hidden elements
+- Creating connection between scenes
+- Emphasizing importance
+- Tech/innovation content
+
+**When to avoid**:
+- When scenes aren't spatially related
+- Overuse causes dizziness
+- Slow, stable content
+
+**Brand personalities**: Curious, investigative, tech-forward, dynamic
+
+#### Zoom Out
+**Description**: Camera zooms out to reveal larger context  
+**Duration**: 0.5-1s  
+**Emotional impact**: Revelation, context, bigger picture  
+**Cognitive load**: Medium
+
+**When to use**:
+- Moving from detail to overview
+- Revealing surprising context
+- "Big picture" moments
+- Scale demonstrations
+
+**When to avoid**:
+- When spatial relationship doesn't exist
+- Overuse
+
+**Brand personalities**: Thoughtful, contextual, revealing
+
+---
+
+### Wipe Transitions
+
+**Description**: Next scene wipes across screen like a windshield wiper  
+**Duration**: 0.3-0.8s  
+**Emotional impact**: Playful, retro, stylized, deliberate  
+**Cognitive load**: Medium (noticeable transition)
+
+**Variations**:
+- **Linear wipe**: Straight line across
+- **Clock wipe**: Circular like clock hand
+- **Shape wipe**: Custom shape reveals next scene
+
+**When to use**:
+- Retro/vintage content
+- Playful brands
+- Stylized, artistic content
+- When transition itself is part of the story
+- Intentionally visible transitions
+
+**When to avoid**:
+- Modern, minimal brands
+- Professional/corporate content
+- When you want invisible editing
+- Overuse (feels gimmicky)
+
+**Brand personalities**: Playful, retro, creative, bold, stylized
+
+---
+
+### Scale Transitions
+
+#### Scale Up
+**Description**: Next scene starts small and scales up to fill frame  
+**Duration**: 0.3-0.8s  
+**Emotional impact**: Growing, emerging, appearing, exciting  
+**Cognitive load**: Low to medium
+
+**When to use**:
+- Product reveals
+- Important announcements
+- Growth/success moments
+- Attention-grabbing transitions
+
+**When to avoid**:
+- Subtle, gentle content
+- Overuse
+
+**Brand personalities**: Bold, exciting, growing, confident
+
+#### Scale Down
+**Description**: Current scene scales down and disappears  
+**Duration**: 0.3-0.8s  
+**Emotional impact**: Diminishing, closing, ending  
+**Cognitive load**: Low to medium
+
+**When to use**:
+- Ending sections
+- Minimizing old content
+- Transitioning to bigger picture
+
+**When to avoid**:
+- When you want to maintain energy
+
+**Brand personalities**: Playful, modern, dynamic
+
+---
+
+### Rotation Transitions
+
+**Description**: Scene rotates to reveal next scene  
+**Duration**: 0.5-1s  
+**Emotional impact**: Dynamic, playful, dimensional, modern  
+**Cognitive load**: Medium to high
+
+**When to use**:
+- 3D/dimensional content
+- Playful brands
+- Showing multiple sides/perspectives
+- Creative, stylized content
+
+**When to avoid**:
+- Professional/corporate (can feel gimmicky)
+- Overuse (causes disorientation)
+- Accessibility concerns (motion sensitivity)
+
+**Brand personalities**: Playful, creative, modern, bold, dimensional
+
+---
+
+### Blur Transitions
+
+**Description**: Scene blurs out, next scene blurs in  
+**Duration**: 0.5-1s  
+**Emotional impact**: Dreamy, soft, memory-like, gentle  
+**Cognitive load**: Medium
+
+**When to use**:
+- Dream sequences
+- Memory/flashback
+- Soft, gentle brands
+- Emotional content
+- Wellness/spa content
+
+**When to avoid**:
+- Sharp, precise brands
+- Fast-paced content
+- When clarity is important
+
+**Brand personalities**: Dreamy, soft, gentle, emotional, wellness
+
+---
+
+### Glitch Transitions
+
+**Description**: Digital glitch effect between scenes  
+**Duration**: 0.1-0.3s  
+**Emotional impact**: Digital, edgy, modern, disruptive  
+**Cognitive load**: Medium
+
+**When to use**:
+- Tech brands
+- Gaming content
+- Edgy, disruptive brands
+- Digital-native content
+- Cyberpunk aesthetic
+
+**When to avoid**:
+- Traditional brands
+- Accessibility concerns (can trigger seizures if too intense)
+- Professional/corporate content
+- Overuse
+
+**Brand personalities**: Edgy, tech-forward, disruptive, gaming, modern
+
+---
+
+### Morph Transitions
+
+**Description**: Elements from first scene transform into elements of next  
+**Duration**: 0.5-1.5s  
+**Emotional impact**: Magical, connected, transformative, sophisticated  
+**Cognitive load**: High (requires processing)
+
+**When to use**:
+- Showing transformation
+- Connecting related concepts
+- High-production content
+- When transition itself tells story
+- Premium brands
+
+**When to avoid**:
+- Simple content
+- When elements don't naturally connect
+- Fast-paced content (too slow)
+- Low-production budgets
+
+**Brand personalities**: Sophisticated, magical, transformative, premium, creative
+
+---
+
+## Transition Duration Guidelines
+
+### Very Fast (0.1-0.3s)
+**Feel**: Snappy, energetic, urgent  
+**Use for**: Cuts, quick slides, fast-paced content  
+**Risk**: Can feel jarring if overused
+
+### Fast (0.3-0.5s)
+**Feel**: Dynamic, modern, efficient  
+**Use for**: Most slide/push transitions, energetic content  
+**Risk**: May not give viewer time to process
+
+### Medium (0.5-1s)
+**Feel**: Balanced, professional, comfortable  
+**Use for**: Most fades, standard pacing, commercial content  
+**Risk**: Can feel generic
+
+### Slow (1-2s)
+**Feel**: Contemplative, dramatic, luxurious  
+**Use for**: Emotional moments, luxury brands, dramatic shifts  
+**Risk**: Can slow momentum
+
+### Very Slow (2s+)
+**Feel**: Very dramatic, cinematic, artistic  
+**Use for**: Highly emotional moments, art films, specific dramatic effect  
+**Risk**: Can lose viewer attention
+
+## Matching Transitions to Brand Personality
+
+### Modern & Minimal
+**Primary**: Cuts, quick fades (0.3-0.5s)  
+**Secondary**: Simple slides  
+**Avoid**: Wipes, complex transitions, anything "showy"
+
+### Bold & Energetic
+**Primary**: Cuts, quick slides (0.2-0.4s), push transitions  
+**Secondary**: Scale transitions, quick zooms  
+**Avoid**: Slow fades, gentle transitions
+
+### Elegant & Luxurious
+**Primary**: Slow cross-fades (1-2s), morphs  
+**Secondary**: Slow zooms, blur transitions  
+**Avoid**: Cuts, quick transitions, wipes
+
+### Playful & Creative
+**Primary**: Varied - wipes, rotations, scales  
+**Secondary**: Glitches, morphs, custom transitions  
+**Avoid**: Generic fades, being too predictable
+
+### Professional & Trustworthy
+**Primary**: Medium cross-fades (0.5-1s), cuts  
+**Secondary**: Simple slides  
+**Avoid**: Flashy transitions, wipes, glitches
+
+### Tech & Innovative
+**Primary**: Cuts, quick slides, glitches  
+**Secondary**: Zoom transitions, morphs  
+**Avoid**: Slow fades, traditional transitions
+
+## Transition Patterns
+
+### Consistent Throughout
+Use same transition type throughout video.
+
+**Effect**: Cohesive, systematic, professional  
+**Best for**: Clean brands, systematic content, short videos  
+**Risk**: Can feel repetitive in longer videos
+
+### Varied by Section
+Different transition types for different sections.
+
+**Effect**: Clear structure, dynamic, engaging  
+**Best for**: Longer videos, multi-section content  
+**Risk**: Can feel inconsistent if not intentional
+
+### Escalating Intensity
+Start with subtle transitions, increase drama.
+
+**Effect**: Building energy, crescendo  
+**Best for**: Videos with building emotional arc  
+**Risk**: Can peak too early
+
+### Signature Transition
+One unique transition used at key moments.
+
+**Effect**: Memorable, branded, impactful  
+**Best for**: Brand recognition, recurring content series  
+**Risk**: Can feel gimmicky if wrong transition
+
+## Transition + Scene Relationship
+
+### Continuous Action
+**Best transition**: Cut or very fast fade  
+**Why**: Maintains flow of action
+
+### Related Concepts
+**Best transition**: Cross-fade or simple slide  
+**Why**: Shows connection
+
+### Contrasting Concepts
+**Best transition**: Fade to black/white or push  
+**Why**: Emphasizes difference
+
+### Time Passage
+**Best transition**: Fade to black or dissolve  
+**Why**: Signals temporal shift
+
+### Spatial Movement
+**Best transition**: Slide or zoom  
+**Why**: Shows spatial relationship
+
+### Transformation
+**Best transition**: Morph or cross-fade  
+**Why**: Shows change process
+
+## Common Mistakes
+
+### Over-Transitioning
+Using complex transitions when simple cut would work.  
+**Fix**: Default to cuts or simple fades, use complex transitions sparingly
+
+### Inconsistent Style
+Mixing many different transition types randomly.  
+**Fix**: Choose 2-3 transition types and stick to them
+
+### Wrong Duration
+Transitions too slow for fast content or too fast for emotional content.  
+**Fix**: Match duration to overall pacing
+
+### Meaningless Direction
+Slide direction doesn't match meaning (e.g., sliding left for "next").  
+**Fix**: Make direction intentional and consistent
+
+### Gimmicky Transitions
+Using flashy transitions that don't match brand.  
+**Fix**: Choose transitions that reinforce brand personality
+
+### Ignoring Accessibility
+Rapid flashing or extreme motion in transitions.  
+**Fix**: Test for motion sensitivity, provide warnings if needed
+
+## Platform Considerations
+
+### Instagram/TikTok
+- **Prefer**: Cuts, very fast transitions (0.2-0.4s)
+- **Why**: Fast-paced platform, short attention span
+- **Avoid**: Slow fades, complex transitions
+
+### YouTube
+- **Prefer**: Cuts, medium fades (0.5-1s), simple slides
+- **Why**: Varied content types, professional feel
+- **Avoid**: Overuse of flashy transitions
+
+### LinkedIn
+- **Prefer**: Professional fades (0.5-1s), cuts, simple slides
+- **Why**: Professional context
+- **Avoid**: Playful wipes, glitches, anything too casual
+
+### Website
+- **Prefer**: Matches brand - can be more sophisticated
+- **Why**: Engaged audience, brand context
+- **Avoid**: Nothing specific, just match brand
+
+### Paid Ads
+- **Prefer**: Cuts, very fast transitions
+- **Why**: Every second costs money
+- **Avoid**: Slow transitions that waste ad spend
+
+## Testing Transitions
+
+Ask these questions:
+
+1. **Does it match brand personality?**
+2. **Does it match pacing?**
+3. **Does it serve the story?**
+4. **Is it consistent with other transitions?**
+5. **Does it feel invisible or intentional?** (both can be right)
+6. **Does it respect viewer attention?**
+
+## Quick Reference Table
+
+| Transition | Duration | Energy | Best For | Avoid For |
+|------------|----------|--------|----------|-----------|
+| Cut | 0s | High | Modern, fast | Luxury, slow |
+| Fade to Black | 1-2s | Low | Dramatic | Fast-paced |
+| Fade to White | 0.5-1.5s | Medium | Hopeful | Dark content |
+| Cross-Fade | 0.5-2s | Low-Med | Smooth flow | Energetic |
+| Slide | 0.3-0.8s | Medium | Sequential | Random order |
+| Push | 0.3-0.8s | Med-High | Bold | Gentle |
+| Zoom | 0.5-1s | Medium | Connected | Unrelated |
+| Wipe | 0.3-0.8s | Medium | Playful | Corporate |
+| Scale | 0.3-0.8s | Med-High | Dynamic | Subtle |
+| Rotation | 0.5-1s | High | Playful | Professional |
+| Blur | 0.5-1s | Low | Dreamy | Sharp/precise |
+| Glitch | 0.1-0.3s | High | Tech/edgy | Traditional |
+| Morph | 0.5-1.5s | Medium | Premium | Simple |
+
+## Implementation in Editframe
+
+Most transitions can be achieved with CSS animations and the `overlap` attribute on `ef-timegroup`:
+
+```html
+<!-- Cross-fade with 1s overlap -->
+<ef-timegroup mode="sequence" overlap="1s">
+  <ef-timegroup duration="5s" class="fade-in-out">Scene 1</ef-timegroup>
+  <ef-timegroup duration="5s" class="fade-in-out">Scene 2</ef-timegroup>
+</ef-timegroup>
+
+<!-- Slide transition -->
+<ef-timegroup mode="sequence">
+  <ef-timegroup duration="5s" class="slide-out-left">Scene 1</ef-timegroup>
+  <ef-timegroup duration="5s" class="slide-in-right">Scene 2</ef-timegroup>
+</ef-timegroup>
+```
+
+Reference the `elements-composition` skill for specific implementation patterns.