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

code

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)

code

Time:    |0s     |1.5s   |3s     |4.5s   |6s     |7.5s   |9s
Cuts:    ●━━━━━━━●━━━━━━━●━━━━━━━●━━━━━━━●━━━━━━━●━━━━━━━●
Energy:  [HIGH]  [HIGH]  [PEAK]  [HIGH]  [PEAK]  [HIGH]  [END]

Building Tension Pattern

code

Time:    |0s       |4s       |7s      |9s     |10s   |10.5s |11s
Cuts:    ●━━━━━━━━━●━━━━━━━━━●━━━━━━━●━━━━━━●━━━━━●━━━━━●━━━▶
Speed:   [SLOW]    [MEDIUM]  [FAST]  [FASTER] [RAPID] [PEAK]

Breathe Pattern (Documentary/Educational)

code

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)

code

0s        3s        6s        9s        12s
|━━━━━━━━━|━━━━━━━━━|━━━━━━━━━|━━━━━━━━━|
[CUT]     [TEXT]    [SFX]     [CUT]     [MUSIC]

Rhythm Patterns

1. Heartbeat Rhythm

Mimics natural pulse: strong-weak-strong-weak

code

Beat:     |●     |○     |●     |○     |●     |○
Timing:   |0s    |0.5s  |1s    |1.5s  |2s    |2.5s
Action:   |CUT   |hold  |CUT   |hold  |CUT   |hold

2. Escalation Rhythm

Progressive intensity increase

code

Phase 1:  ●━━━━━━━━━●━━━━━━━━━●  (4s intervals)
Phase 2:  ●━━━━━●━━━━━●━━━━━●    (2.5s intervals)
Phase 3:  ●━━●━━●━━●━━●━━●       (1s intervals)
Climax:   ●●●●●●●●●●●            (rapid cuts)

3. Wave Rhythm

Tension and release cycles

code

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

code

Music:    |♩       |♩       |♩       |♩       |
BPM:      |120     |        |        |        |
Time:     |0ms     |500ms   |1000ms  |1500ms  |
Cut:      |●       |        |●       |        |   (half-time)
Cut:      |●       |●       |●       |●       |   (on-beat)
Cut:      |●   ●   |●   ●   |●   ●   |●   ●   |   (double-time)

BPM to Cuts/Minute Conversion

code

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

code

                    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

code

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)

code

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)

code

0-1s: Pattern interrupt (visual/audio)
1-3s: State the transformation/outcome
3-5s: Credibility or intrigue
5s+:  Begin content

LinkedIn Hook (0-3s)

code

0-1s: Professional context
1-2s: Contrarian take or insight
2-3s: Why it matters to viewer

Pacing by Content Type

Tutorial Content

code

Intro:     Fast (hook + overview)     2-3s shots
Demo:      Slow (show process)        6-12s shots
Summary:   Medium (recap)             4-6s shots

Story Content

code

Setup:     Medium (establish)         4-6s shots
Build:     Accelerating              4s → 2s shots
Climax:    Fast                      1-2s shots
Resolution: Slow                     6-8s shots

Product Content

code

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

code

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

code

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
<Sequence from={0} durationInFrames={fps * 5}>        {/* 0-5s */}
<Sequence from={fps * 5} durationInFrames={fps * 3}>  {/* 5-8s */}
<Sequence from={fps * 8}>                              {/* 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";
<Img src={staticFile("claude-logo.png")} />

// ❌ BAD - Inline SVG when you need actual logo
<svg>...</svg>  // Only for generated graphics

// ✅ GOOD - Audio via staticFile
<Audio src={staticFile("audio/snap-attack.mp3")} volume={0.35} />

Easing Functions

typescript

import { Easing } from "remotion";

// Built-in easings
const opacity = interpolate(frame, [0, 30], [0, 1], {
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),  // ease
  // easing: Easing.inOut(Easing.ease),       // ease-in-out
  // easing: Easing.out(Easing.cubic),        // ease-out-cubic
});

// Common presets
const EASE_OUT_EXPO = Easing.bezier(0.16, 1, 0.3, 1);
const EASE_IN_OUT_QUART = Easing.bezier(0.76, 0, 0.24, 1);

Related Skills

•remotion-composer: Programmatic video generation with Remotion
•video-storyboarding: Pre-production planning and scene structure
•motion-animation-patterns: Animation timing curves
•core-web-vitals: Performance timing principles
•thumbnail-first-frame: First frame visibility gotchas

References

•Platform Pacing Rules - Detailed platform requirements
•Rhythm Patterns - Advanced rhythm techniques
•Attention Curves - Viewer retention research
•Remotion spring() docs - Spring animation API
•Remotion makeTransform() - Transform composition
•Remotion interpolateStyles() - Style interpolation