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

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

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

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