Video Storyboarding for Tech Demos

Pre-production planning system for creating compelling tech demo videos. Combines the AIDA marketing framework with structured scene planning.

Overview

┌─────────────────────────────────────────────────────────────────┐ │ VIDEO PRODUCTION PIPELINE │ ├─────────────────────────────────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ CONCEPT │──▶│STORYBOARD│──▶│ ASSETS │──▶│ RENDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ • AIDA │ │ • Scenes │ │ • Code │ │ • Export │ │ │ │ • Hook │ │ • Timing │ │ • B-roll │ │ • Review │ │ │ │ • CTA │ │ • Shots │ │ • Audio │ │ • Publish│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────────┘

AIDA Framework for Tech Demos

The AIDA framework structures your video to guide viewers from awareness to action.

Framework Timeline

┌─────────────────────────────────────────────────────────────────┐ │ AIDA TIMELINE │ ├─────────────────────────────────────────────────────────────────┤ │ 0s 15s 45s 75s 90s │ │ │───────────────│────────────────│────────────────│──────│ │ │ │ ATTENTION │ INTEREST │ DESIRE │ACTION│ │ │ │ (15%) │ (35%) │ (35%) │(15%) │ │ │ │ │ Emotion: Curious Engaged Convinced Motivated │ └─────────────────────────────────────────────────────────────────┘

Phase Summary

Phase Duration Goal Content

A - Attention 10-15s Stop the scroll Bold claim, visual impact, pattern interrupt

I - Interest 30-40s Demonstrate value Problem setup, solution intro, feature highlights

D - Desire 30-40s Build connection Benefits, social proof, differentiation

A - Action 10-15s Drive conversion Clear CTA, next steps, closing

Anti-Patterns to Avoid

❌ Logo animations (skip these) ❌ Slow fade-ins ❌ Generic stock footage ❌ Reading from slides

Scene Planning Template

scene-001-hook.yaml

scene: id: "001" name: "Hook" phase: "attention"

timing: start: "00:00" duration: "00:08" end: "00:08"

content: narration: | What if you could give Claude Code the memory of a senior developer?

on_screen_text: - text: "179 Skills" animation: "scale-in" timing: "0:02-0:04"

visuals: background: "dark gradient" main_element: "animated skill icons"

transitions: in: "cut" out: "fade"

assets_required:

• "skill-icons-spritesheet.png"
• "claude-logo.svg"

Timing Calculations

Video Length Guidelines

Platform Optimal Max Notes

Twitter/X 30-45s 2:20 Hook in 3s

LinkedIn 30-90s 10:00 Value in 15s

YouTube Shorts 30-60s 60s Vertical only

YouTube 2-5 min No limit Longer = better

Product Hunt 1-2 min 3:00 Demo focused

GitHub README 30-60s 2:00 Silent-friendly

Pacing Calculator

interface VideoTimingConfig { totalDuration: number; // seconds phases: { attention: number; // percentage interest: number; desire: number; action: number; }; }

function calculatePhaseTiming(config: VideoTimingConfig) { const { totalDuration, phases } = config;

return { attention: { start: 0, duration: Math.round(totalDuration * phases.attention / 100), }, interest: { start: Math.round(totalDuration * phases.attention / 100), duration: Math.round(totalDuration * phases.interest / 100), }, // ... desire and action phases }; }

// Example: 90 second video const timing = calculatePhaseTiming({ totalDuration: 90, phases: { attention: 15, interest: 35, desire: 35, action: 15 } });

Words Per Minute Guide

Speaking Speed WPM Words/30s Use Case

Slow (dramatic) 100 50 Hooks, reveals

Normal 130 65 Explanations

Fast (excited) 160 80 Features list

Very Fast 180+ 90+ Avoid (unclear)

Shot List Template

┌──────┬──────────┬─────────────────────────┬─────────┬────────────┐ │ Shot │ Duration │ Description │ Type │ Assets │ ├──────┼──────────┼─────────────────────────┼─────────┼────────────┤ │ 001 │ 0:03 │ Logo reveal │ Motion │ logo.svg │ │ 002 │ 0:05 │ Hook text animation │ Kinetic │ font.otf │ │ 003 │ 0:08 │ Terminal demo │ Screen │ demo.mp4 │ │ 004 │ 0:12 │ Feature walkthrough │ Screen │ capture.mp4│ │ 005 │ 0:05 │ CTA with command │ Static │ bg.png │ │TOTAL │ 0:33 │ │ │ │ └──────┴──────────┴─────────────────────────┴─────────┴────────────┘

Storyboarding Workflow

1. DEFINE GOAL └─▶ What action should viewers take? └─▶ Example: "Install OrchestKit"

2. IDENTIFY AUDIENCE └─▶ Who is watching? └─▶ Example: "Developers using Claude Code"

3. CRAFT HOOK └─▶ What stops the scroll? └─▶ Example: "200 skills, one command"

4. MAP AIDA PHASES └─▶ Allocate time to each phase └─▶ Calculate scene durations

5. WRITE SCENES └─▶ Detail each scene with template └─▶ Include narration, visuals, timing

6. CREATE SHOT LIST └─▶ Break scenes into individual shots └─▶ Identify all required assets

7. PLAN B-ROLL └─▶ List all supplementary footage └─▶ Schedule capture sessions

8. REVIEW & ITERATE └─▶ Check timing, flow, message clarity

Remotion Integration

interface StoryboardScene { id: number; phase: 'attention' | 'interest' | 'desire' | 'action'; timing: string; narration: string; text: string | null; }

function sceneToReaction( scene: StoryboardScene, fps: number = 30 ): { component: string; durationInFrames: number } { const [start, end] = scene.timing.split('-').map(parseTime); const durationSeconds = end - start;

return { component: Scene${scene.id}, durationInFrames: Math.round(durationSeconds * fps), }; }

function parseTime(time: string): number { const [mins, secs] = time.split(':').map(Number); return mins * 60 + secs; }

Related Skills

• video-pacing : Rhythm and timing rules

• elevenlabs-narration : TTS integration

• content-type-recipes : Production recipes by content type

• remotion-composer : Programmatic video generation

References

• AIDA Framework - Deep dive into AIDA psychology

• Scene Templates - Copy-paste scene templates

• Pre-Production Checklist - Complete checklist