--- name: video-pacing description: Video rhythm and timing for maximum engagement. Use when planning cut frequency, optimizing retention, or adapting pacing for different platforms tags: [video, pacing, rhythm, editing, attention, engagement] context: fork agent: demo-producer user-invocable: false version: 1.0.0 --- # Video Pacing Comprehensive guide to video rhythm, timing, and pacing for maximum viewer engagement across platforms. ## Core Principle **Pacing = Information Density x Visual Change Rate** The optimal pace balances cognitive load with visual stimulation. Too fast overwhelms; too slow loses attention. ## Attention Curve Theory ``` Engagement | 100%|●━━━━━━━━━━● | ╲ 80%| ╲━━━━━━━━━━━━━━● | ╲ 60%| ╲━━━━━━● | ╲ 40%| ╲━━━━━━● | ╲ 20%| ╲━━━● | 0%└────────────────────────────────────────────────▶ 0s 3s 10s 30s 60s 90s 120s 180s Time in Video ■ Critical retention points: • 0-3s: Hook (lose 33% without strong hook) • 10s: First major drop-off • 30s: Platform algorithm threshold • 60s: Half-time engagement check ``` ## Platform-Specific Pacing Rules | Platform | Optimal Cut Rate | Avg. Shot Duration | Hook Window | Sweet Spot Length | |----------|------------------|-------------------|-------------|-------------------| | TikTok | 20-40 cuts/min | 1.5-3 seconds | 0.5 seconds | 15-30 seconds | | Reels | 15-30 cuts/min | 2-4 seconds | 1 second | 30-60 seconds | | YouTube Shorts | 15-25 cuts/min | 2-4 seconds | 1.5 seconds | 30-60 seconds | | YouTube Long | 8-15 cuts/min | 4-8 seconds | 5 seconds | 8-15 minutes | | LinkedIn | 5-10 cuts/min | 6-12 seconds | 3 seconds | 60-90 seconds | | Twitter/X | 15-25 cuts/min | 2-4 seconds | 1 second | 15-45 seconds | ## Cut Frequency Patterns ### High-Energy Pattern (TikTok, Reels) ``` Time: |0s |1.5s |3s |4.5s |6s |7.5s |9s Cuts: ●━━━━━━━●━━━━━━━●━━━━━━━●━━━━━━━●━━━━━━━●━━━━━━━● Energy: [HIGH] [HIGH] [PEAK] [HIGH] [PEAK] [HIGH] [END] ``` ### Building Tension Pattern ``` Time: |0s |4s |7s |9s |10s |10.5s |11s Cuts: ●━━━━━━━━━●━━━━━━━━━●━━━━━━━●━━━━━━●━━━━━●━━━━━●━━━▶ Speed: [SLOW] [MEDIUM] [FAST] [FASTER] [RAPID] [PEAK] ``` ### Breathe Pattern (Documentary/Educational) ``` Time: |0s |8s |16s |20s |28s |36s Cuts: ●━━━━━━━━━●━━━━━━━━━●━━━━━━━━━━●━━━━━━━●━━━━━━━━━● Rhythm: [INTRO] [DEVELOP] [BREATHE] [BUILD] [DEVELOP] [LAND] ``` ## The 3-Second Rule Every 3 seconds, provide ONE of: - New visual information (cut, motion, transition) - New audio information (voice change, sound effect, music shift) - New text information (caption, graphic, lower third) ``` 0s 3s 6s 9s 12s |━━━━━━━━━|━━━━━━━━━|━━━━━━━━━|━━━━━━━━━| [CUT] [TEXT] [SFX] [CUT] [MUSIC] ``` ## Rhythm Patterns ### 1. Heartbeat Rhythm Mimics natural pulse: strong-weak-strong-weak ``` Beat: |● |○ |● |○ |● |○ Timing: |0s |0.5s |1s |1.5s |2s |2.5s Action: |CUT |hold |CUT |hold |CUT |hold ``` ### 2. Escalation Rhythm Progressive intensity increase ``` Phase 1: ●━━━━━━━━━●━━━━━━━━━● (4s intervals) Phase 2: ●━━━━━●━━━━━●━━━━━● (2.5s intervals) Phase 3: ●━━●━━●━━●━━●━━● (1s intervals) Climax: ●●●●●●●●●●● (rapid cuts) ``` ### 3. Wave Rhythm Tension and release cycles ``` Tension: ████████ ███████░ ██████░░ █████░░░░ Release: ██░░░░░░░ ████░░░░░ Build: ██████░░░ ████████░ Peak: ██████████ ``` ## Cut Types and When to Use Them | Cut Type | Duration | Use Case | Energy Level | |----------|----------|----------|--------------| | Hard Cut | 0 frames | Action, emphasis, rhythm | High | | J-Cut | Audio leads 0.5-1s | Conversation, anticipation | Medium | | L-Cut | Video leads 0.5-1s | Continuation, smooth flow | Medium | | Jump Cut | 0 frames, same subject | Compression, energy | High | | Match Cut | 0 frames, matched motion | Transitions, storytelling | Medium | | Smash Cut | 0 frames, contrast | Shock, comedy, drama | Very High | | Fade | 0.5-2s | Endings, time passage | Low | | Dissolve | 0.5-1.5s | Dream, memory, soft transition | Low | ## Music-Driven Pacing ### Beat Synchronization ``` Music: |♩ |♩ |♩ |♩ | BPM: |120 | | | | Time: |0ms |500ms |1000ms |1500ms | Cut: |● | |● | | (half-time) Cut: |● |● |● |● | (on-beat) Cut: |● ● |● ● |● ● |● ● | (double-time) ``` ### BPM to Cuts/Minute Conversion ``` BPM 60 → 60 potential cuts/min (1 per second) BPM 90 → 90 potential cuts/min (1.5 per second) BPM 120 → 120 potential cuts/min (2 per second) BPM 140 → 140 potential cuts/min (2.3 per second) Practical application: Cut on every 2nd or 4th beat BPM 120 on every 2nd beat = 60 cuts/min BPM 120 on every 4th beat = 30 cuts/min ``` ## Information Density vs Pace Tradeoff ``` Information Density Low Medium High ┌─────────────┬─────────────┬─────────────┐ Fast │ Music Video │ TikTok │ OVERWHELM │ │ Pure vibes │ Entertainment│ Avoid! │ Pace ──────┼─────────────┼─────────────┼─────────────┤ Med │ Aesthetic │ YouTube │ Documentary │ │ B-roll │ Essays │ Explainers │ ──────┼─────────────┼─────────────┼─────────────┤ Slow │ BORING │ Corporate │ Educational │ │ Avoid! │ LinkedIn │ Tutorials │ └─────────────┴─────────────┴─────────────┘ ``` ### Cognitive Load Zones ``` Optimal Zone: 3-5 new concepts per minute Warning Zone: 6-8 concepts (reduce pace or simplify) Overload: 9+ concepts (viewers will drop off) ``` ## Hook Formulas by Platform ### TikTok/Reels Hook (0.5-1s) ``` Frame 1 (0-0.3s): Visual shock or question Frame 2 (0.3-0.7s): Promise of value Frame 3 (0.7-1s): Begin delivery ``` ### YouTube Hook (0-5s) ``` 0-1s: Pattern interrupt (visual/audio) 1-3s: State the transformation/outcome 3-5s: Credibility or intrigue 5s+: Begin content ``` ### LinkedIn Hook (0-3s) ``` 0-1s: Professional context 1-2s: Contrarian take or insight 2-3s: Why it matters to viewer ``` ## Pacing by Content Type ### Tutorial Content ``` Intro: Fast (hook + overview) 2-3s shots Demo: Slow (show process) 6-12s shots Summary: Medium (recap) 4-6s shots ``` ### Story Content ``` Setup: Medium (establish) 4-6s shots Build: Accelerating 4s → 2s shots Climax: Fast 1-2s shots Resolution: Slow 6-8s shots ``` ### Product Content ``` Hook: Fast (attention grab) 1-2s shots Features: Medium (demonstrate) 3-5s shots Benefits: Slow (emotional) 5-8s shots CTA: Fast (urgency) 2-3s shots ``` ## Retention Optimization Checkpoints ``` Checkpoint Action if Dropping ────────────────────────────────────────── 0-3s Strengthen hook visual 3-10s Add pattern interrupt 10-30s Restate value proposition 30-60s Introduce new element 60-90s Provide payoff/proof 90-120s Build to climax 120s+ Maintain with variety ``` ## Quick Reference: Pacing Cheat Sheet ``` Platform | Cuts/Min | Shot Avg | Hook | Music BPM ─────────────┼──────────┼──────────┼─────────┼────────── TikTok | 20-40 | 1.5-3s | 0.5s | 120-140 Reels | 15-30 | 2-4s | 1s | 100-130 YT Shorts | 15-25 | 2-4s | 1.5s | 100-120 YT Long | 8-15 | 4-8s | 5s | 80-120 LinkedIn | 5-10 | 6-12s | 3s | 60-90 ``` ## Remotion-Specific Pacing ### Frame Calculation Formulas ```typescript // Core formula: frames = fps * seconds const fps = 30; const SCENE_END = fps * 5; // 5 seconds = 150 frames const FADE_START = fps * 4.5; // 4.5 seconds = 135 frames // Sequence timing {/* 0-5s */} {/* 5-8s */} {/* 8s onwards */} ``` ### Animation Utilities (Underutilized) ```typescript import { interpolate, interpolateColors, // Color transitions spring, measureSpring, // Know spring duration Easing, // Custom curves } from "remotion"; import { makeTransform, // Clean transform composition interpolateStyles, // Smooth style transitions } from "@remotion/animation-utils"; // Example: makeTransform for cleaner code const transform = makeTransform([ ["translateY", `${(1 - progress) * 20}px`], ["scale", scale], ["rotate", `${rotation}deg`], ]); // Example: interpolateColors for gradients const color = interpolateColors( frame, [0, 30, 60], ["#ef4444", "#f59e0b", "#22c55e"] ); // Example: measureSpring for precise timing const duration = measureSpring({ fps, config: { damping: 15, stiffness: 150 } }); console.log(`Spring takes ${duration} frames`); ``` ### Spring Presets ```typescript // Snappy (UI elements, buttons) const SPRING_SNAPPY = { damping: 15, stiffness: 180 }; // Smooth (containers, panels) const SPRING_SMOOTH = { damping: 12, stiffness: 120 }; // Bouncy (attention, celebration) const SPRING_BOUNCY = { damping: 8, stiffness: 200 }; // Slow (dramatic reveals) const SPRING_SLOW = { damping: 20, stiffness: 80 }; // Usage const scale = spring({ frame, fps, config: SPRING_SNAPPY }); ``` ### Bundler Caching Gotchas ```bash # PROBLEM: Asset changes not reflected in render # Remotion bundles aggressively - old assets may persist # SOLUTION 1: Kill and re-render pkill -f "remotion" npx remotion render CompositionName output.mp4 # SOLUTION 2: Clear bundler cache rm -rf node_modules/.cache npx remotion render ... # SOLUTION 3: Use unique filenames for assets during dev public/logo-v2.png # Instead of overwriting logo.png ``` ### staticFile vs Inline Assets ```typescript // ✅ GOOD - External assets via staticFile import { staticFile, Img } from "remotion"; // ❌ BAD - Inline SVG when you need actual logo ... // Only for generated graphics // ✅ GOOD - Audio via staticFile