video-pacing
SKILL.md
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 |
| 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
// 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)
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
// 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
# 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
// ✅ 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
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 Remotionvideo-storyboarding: Pre-production planning and scene structuremotion-animation-patterns: Animation timing curvescore-web-vitals: Performance timing principlesthumbnail-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
Weekly Installs
8
Repository
yonatangross/orchestkitGitHub Stars
95
First Seen
Feb 2, 2026
Security Audits
Installed on
claude-code6
gemini-cli5
antigravity5
github-copilot5
codex4
opencode4