/ork:demo-producer                    # Interactive mode - asks what to create
/ork:demo-producer skill explore      # Create demo for a skill
/ork:demo-producer plugin ork     # Create demo for a plugin
/ork:demo-producer tutorial "Building a REST API"  # Custom tutorial

What type of demo do you want to create?

○ Skill - OrchestKit skill showcase
○ Agent - AI agent demonstration
○ Plugin - Plugin installation/features
○ Tutorial - Custom coding tutorial
○ CLI Tool - Command-line tool demo
○ Code Walkthrough - Explain existing code

What format(s) do you need?

☑ Horizontal (16:9) - YouTube, Twitter
☑ Vertical (9:16) - TikTok, Reels, Shorts
☐ Square (1:1) - Instagram, LinkedIn

What style fits your content?

○ Quick Demo (6-10s) - Fast showcase, single feature
○ Standard Demo (15-25s) - Full workflow, multiple steps
○ Tutorial (30-60s) - Detailed explanation, code examples
○ Cinematic (60s+) - Story-driven, high polish
○ Scrapbook (15-35s) - Warm paper, fast cuts, social proof collage (Anthropic style)

Audio preferences?

○ Music Only - Subtle ambient background
○ Music + SFX - Background + success sounds
○ Silent - No audio

interface SkillMetadata {
  name: string;
  description: string;
  tags: string[];
  version: string;
  userInvocable: boolean;
  context: 'fork' | 'inherit' | 'none';
  phases: WorkflowPhase[];
  examples: CodeExample[];
  keyFeatures: string[];
  relatedSkills: string[];
}

# Extract name
name=$(grep "^name:" SKILL.md | head -1 | cut -d: -f2- | xargs)

# Extract description
description=$(grep "^description:" SKILL.md | head -1 | cut -d: -f2- | xargs)

# Extract tags
tags=$(grep "^tags:" SKILL.md | sed 's/tags: \[//' | sed 's/\]//' | tr -d '"')

# Extracts from body instead of frontmatter
description=$(grep -m1 "description:" SKILL.md | cut -d: -f2-)
# Gets "Description of feature X" from body, not skill description

# Extract frontmatter between --- delimiters
frontmatter=$(sed -n '/^---$/,/^---$/p' SKILL.md | sed '1d;$d')
description=$(echo "$frontmatter" | grep "^description:" | cut -d: -f2- | xargs)

// WRONG: Spring animation starting at frame 0 (invisible first frame)
const scale = spring({ frame, fps, from: 0, to: 1 });
// WRONG: Hardcoded callout coordinates (break on format change)
<div style={{ position: 'absolute', left: 450, top: 320 }}>
// WRONG: Music competing with narration (no ducking)
// Both tracks at -12 dB = unintelligible narration

// Remotion folder organization
Production/
├── Landscape-16x9/      // YouTube, Website (1920x1080)
│   ├── Core-Skills/
│   ├── Memory-Skills/
│   └── Styles/          // ProgressiveZoom, SplitMerge, etc.
├── Vertical-9x16/       // TikTok, Reels, Shorts (1080x1920)
├── Square-1x1/          // Instagram, LinkedIn (1080x1080)
└── Marketing/           // Brand & intro videos

# WRONG: No planning, no script, no timing
vhs record my-demo.tape
# Results in: rambling, bad pacing, missed key moments

video-storyboarding     terminal-demo-generator     manim-visualizer
(pre-production)        (recording)                 (animations)
       |                       |                         |
       v                       v                         v
content-type-recipes    remotion-composer <---- scene-intro-cards
(recipes)               (composition)          callout-positioning
       |                       |               thumbnail-first-frame
       v                       v
narration-scripting     music-sfx-selection
hook-formulas           audio-mixing-patterns
video-pacing            elevenlabs-narration

TERMINAL TEXT DENSITY
=====================
✓ "Analyzing topic → 3 patterns found"     (action → result)
✗ "Phase 1: Topic Analysis"                (title only)
✗ "   └─ Keywords: real-time, notifications" (sub-detail)

✓ "✓ #2 patterns"                          (compact completion)
✗ "✓ Task #2 completed: patterns analyzed" (verbose completion)

15-SECOND VIDEO BREAKDOWN
=========================
0-7s:   Terminal demo (action-packed)
7-11s:  Result visualization (payoff)
11-15s: CTA (install command + stats)

Rule: If content doesn't earn its screen time, cut it.

# Phase 1: Activation (2s)
◆ Activating skill: {name}
  → Reading skills/{name}/SKILL.md
  → Auto-injecting: {related_skills}
✓ {description}

# Phase 2: Task Creation (3s)
◆ TaskCreate: Created task #1 "{phase_1}"
◆ TaskCreate: Created task #2 "{phase_2}"

# Phase 3: Execution (8-15s)
◆ TaskUpdate: Task #1 → in_progress
⠋ [Task #1] {action}...
✓ [Task #1] {phase_1} completed
◆ TaskUpdate: Task #2 → in_progress
⠋ [Task #2] {action}...
✓ [Task #2] {phase_2} completed

# Phase 4: Results (2s)
◆ TaskList: 2/2 completed
✓ {summary}

# Phase 1: Spawning (2s)
⚡ Spawning {agent_name} agent via Task tool...

# Phase 2: Tool Usage (5s)
◆ Read: {file_count} files analyzed
◆ Grep: {pattern_count} patterns found
◆ Bash: Running {command}

# Phase 3: Parallel Agents (8s) - if applicable
⚡ Spawning {n} parallel sub-agents...
◆ TaskUpdate: Task #1 → in_progress
◆ TaskUpdate: Task #2 → in_progress
✓ [Task #1] {sub_agent_1} completed
✓ [Task #2] {sub_agent_2} completed

# Phase 4: Synthesis (5s)
◆ Synthesizing results from {n} agents...
✓ {final_output}

# Phase 1: Discovery (3s)
> /plugin marketplace search {plugin}

OrchestKit Marketplace
──────────────────────
{plugin_name} v{version}
{description}
★ {stars} | ↓ {downloads}

# Phase 2: Installation (4s)
> /plugin install {plugin}

Installing {plugin_name}...
  → Downloading from marketplace
  → Validating plugin.json
  → Registering {skills_count} skills
  → Registering {agents_count} agents
  → Setting up {hooks_count} hooks
✓ {plugin_name} installed successfully

# Phase 3: Configuration (5s)
> /ork:configure

{configuration_wizard}

# Phase 4: Features (8s)
{feature_showcase}

# Phase 1: Problem Statement (3s)
# {problem_description}

# Phase 2: Solution Setup (5s)
> {setup_commands}

# Phase 3: Code Writing (15-30s)
# Show typing code with explanations
> cat {file}

{code_content}

# Phase 4: Execution (5s)
> {run_command}
{output}

# Phase 5: Result (3s)
✓ {success_message}

# Phase 1: Command (2s)
> {command}

# Phase 2: Execution (5-12s)
{animated_output}

# Phase 3: Result (3s)
✓ {result_summary}

# Phase 1: File Overview (3s)
> cat {file_path}

# Phase 2: Key Sections (15-40s)
# Navigate through sections with highlights
# Lines {start}-{end}: {explanation}

{code_block_1}

# Purpose: {explanation_1}

{code_block_2}

# Pattern: {pattern_name}

# Phase 3: Connections (5s)
# Shows relationships to other files

# Phase 4: Summary (3s)
# Key takeaways

┌──────────────────────────────────────────────────────────────────┐
│                     Demo Producer Pipeline                        │
├──────────────────────────────────────────────────────────────────┤
│                                                                   │
│  ┌─────────────┐    ┌──────────────┐    ┌─────────────────────┐  │
│  │   Content   │───▶│   Content    │───▶│   Script Generator  │  │
│  │   Detector  │    │   Analyzer   │    │   (per type)        │  │
│  └─────────────┘    └──────────────┘    └──────────┬──────────┘  │
│                                                     │             │
│                                                     ▼             │
│  ┌─────────────┐    ┌──────────────┐    ┌─────────────────────┐  │
│  │  Remotion   │◀───│    VHS       │◀───│   Terminal Script   │  │
│  │  Composer   │    │   Recorder   │    │   (.sh + .tape)     │  │
│  └──────┬──────┘    └──────────────┘    └─────────────────────┘  │
│         │                                                         │
│         ▼                                                         │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │                    Final Outputs                             │ │
│  │  • horizontal/{Name}Demo.mp4                                 │ │
│  │  • vertical/{Name}Demo-Vertical.mp4                          │ │
│  │  • square/{Name}Demo-Square.mp4 (optional)                   │ │
│  └─────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘

# After interactive selection, generates:

# 1. Terminal script
./skills/demo-producer/scripts/generate-script.sh \
  --type=skill \
  --name=explore \
  --style=standard \
  --output=orchestkit-demos/scripts/

# 2. VHS tape files
./skills/demo-producer/scripts/generate-tape.sh \
  --script=demo-explore.sh \
  --format=horizontal,vertical \
  --output=orchestkit-demos/tapes/

# 3. Record VHS
cd orchestkit-demos/tapes && vhs sim-explore.tape

# 4. Add Remotion composition
./skills/demo-producer/scripts/add-composition.sh \
  --name=explore \
  --type=skill \
  --formats=horizontal,vertical

# 5. Render final videos
cd orchestkit-demos && npx remotion render ExploreDemo --output=out/horizontal/ExploreDemo.mp4
npx remotion render ExploreDemo-Vertical --output=out/vertical/ExploreDemo-Vertical.mp4

orchestkit-demos/out/
├── horizontal/
│   └── {Name}Demo.mp4          # 1920x1080 16:9
├── vertical/
│   └── {Name}Demo-Vertical.mp4  # 1080x1920 9:16
└── square/
    └── {Name}Demo-Square.mp4    # 1080x1080 1:1 (optional)

Set Width 1400
Set Height 650
Set FontSize 18
Set Padding 30

Set Width 900
Set Height 1400
Set FontSize 22
Set Padding 40

Set Width 1080
Set Height 1080
Set FontSize 20
Set Padding 35

Total = Hook + Content + CTA + Buffer

where:
- Hook: 1.5-3s depending on style
- Content: varies by type
- CTA: 2-5s depending on style
- Buffer: 0.5s for fade in/out

width={1920}
height={1080}

width={1080}
height={1920}

width={1080}
height={1080}

Production/                    # Ready-to-render videos
├── Landscape-16x9/           # YouTube, Website (1920x1080)
│   ├── Core-Skills/          # implement, verify, commit, explore
│   ├── Memory-Skills/        # remember, memory
│   ├── Review-Skills/        # review-pr, create-pr, fix-issue
│   ├── DevOps-Skills/        # doctor, configure, run-tests, feedback
│   ├── AI-Skills/            # brainstorming, assess, assess-complexity
│   ├── Advanced-Skills/      # skill-evolution, demo-producer, add-golden
│   └── Styles/               # Alternative visualizations (ProgressiveZoom, SplitMerge, etc.)
├── Vertical-9x16/            # TikTok, Reels, Shorts (1080x1920)
├── Square-1x1/               # Instagram, LinkedIn (1080x1080)
└── Marketing/                # Brand & intro videos
Templates/                    # Reference examples for each component style
Experiments/                  # Work in progress, testing new ideas

┌─────────────────────────────────────────────────────────────┐
│                    Script Generator                          │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  Input                                                       │
│  ├── Content Type (skill|agent|plugin|tutorial|cli|code)    │
│  ├── Content Source (file path or description)              │
│  ├── Style (quick|standard|tutorial|cinematic)              │
│  └── Options (hooks, agents, phases)                        │
│                                                              │
│  Process                                                     │
│  ├── 1. Parse content source                                │
│  ├── 2. Extract key information                             │
│  ├── 3. Select template                                     │
│  ├── 4. Inject dynamic content                              │
│  └── 5. Generate timing                                     │
│                                                              │
│  Output                                                      │
│  ├── demo-{name}.sh (bash simulator)                        │
│  ├── sim-{name}.tape (horizontal VHS)                       │
│  └── sim-{name}-vertical.tape (vertical VHS)                │
└─────────────────────────────────────────────────────────────┘

#!/usr/bin/env bash
# Auto-generated demo script for {name}
# Type: {content_type} | Style: {style}
# Generated: {timestamp}

set -euo pipefail

# Colors
GREEN="\033[32m"
YELLOW="\033[33m"
CYAN="\033[36m"
MAGENTA="\033[35m"
DIM="\033[2m"
BOLD="\033[1m"
RESET="\033[0m"

# Spinners
SPINNERS=("⠋" "⠙" "⠹" "⠸" "⠼" "⠴" "⠦" "⠧" "⠇" "⠏")

# Functions
type_text() {
    local text="$1"
    local delay="${2:-0.03}"
    for ((i=0; i<${#text}; i++)); do
        echo -n "${text:$i:1}"
        sleep "$delay"
    done
    echo
}

spinner() {
    local message="$1"
    local duration="${2:-1}"
    local end=$((SECONDS + duration))
    local i=0
    while [ $SECONDS -lt $end ]; do
        printf "\r${CYAN}${SPINNERS[$i]} ${message}${RESET}"
        i=$(( (i + 1) % ${#SPINNERS[@]} ))
        sleep 0.1
    done
    printf "\r"
}

status_bar() {
    echo -e "${DIM}[Opus 4.6] ████████░░ 42% | ~/project git:(main) | ● 3m${RESET}"
    echo -e "${DIM}✓ Bash ×3 | ✓ Read ×5 | ✓ Grep ×2 | ✓ Task ×∞${RESET}"
    echo -e "${DIM}>> bypass permissions on (shift+Tab to cycle)${RESET}"
    echo
}

task_create() {
    echo -e "${CYAN}◆${RESET} TaskCreate: Created task #$1 \"$2\""
    sleep 0.3
}

task_update() {
    echo -e "${CYAN}◆${RESET} TaskUpdate: Task #$1 → $2"
    sleep 0.2
}

task_complete() {
    echo -e "${GREEN}✓${RESET} [Task #$1] $2 ${GREEN}completed${RESET}"
    sleep 0.2
}

activate_skill() {
    echo -e "${CYAN}◆${RESET} Activating skill: ${MAGENTA}$1${RESET}"
    sleep 0.3
    echo -e "  ${DIM}→ Reading skills/$1/SKILL.md${RESET}"
    sleep 0.2
    if [ -n "${2:-}" ]; then
        echo -e "  ${DIM}→ Auto-injecting: $2${RESET}"
        sleep 0.2
    fi
    echo -e "${GREEN}✓${RESET} $3"
    sleep 0.3
}

spawn_agents() {
    echo -e "${YELLOW}⚡${RESET} Spawning $1 parallel agents via Task tool..."
    sleep 0.5
}

# Main demo
main() {
    clear
    status_bar

    {DEMO_CONTENT}

    echo
    echo -e "${GREEN}${BOLD}Demo complete!${RESET}"
}

main

Output ../output/{name}-demo.mp4
Set Shell "bash"
Set FontFamily "Menlo"
Set FontSize 18
Set Width 1400
Set Height 650
Set Theme "Dracula"
Set Padding 30
Set Framerate 30
Set TypingSpeed 50ms

Type "../scripts/demo-{name}.sh"
Enter
Sleep {duration}s

Output ../output/{name}-demo-vertical.mp4
Set Shell "bash"
Set FontFamily "Menlo"
Set FontSize 22
Set Width 900
Set Height 1400
Set Theme "Dracula"
Set Padding 40
Set Framerate 30
Set TypingSpeed 50ms

Type "../scripts/demo-{name}.sh"
Enter
Sleep {duration}s

# Extract frontmatter
name=$(grep "^name:" SKILL.md | cut -d: -f2 | tr -d ' ')
description=$(grep "^description:" SKILL.md | cut -d: -f2-)
tags=$(grep "^tags:" SKILL.md | sed 's/tags: \[//' | sed 's/\]//')

# Extract phases from ## headers
phases=$(grep "^## " SKILL.md | sed 's/## //')

# Extract from frontmatter
name=$(grep "^name:" agent.md | cut -d: -f2 | tr -d ' ')
skills=$(grep "^  - " agent.md | sed 's/  - //')
tools=$(grep "tools:" -A 10 agent.md | grep "^  - " | sed 's/  - //')

# Extract with jq
name=$(jq -r '.name' plugin.json)
version=$(jq -r '.version' plugin.json)
skills_count=$(jq '.skills | length' plugin.json)
agents_count=$(jq '.agents | length' plugin.json)

# Parse tutorial/cli description
title="$1"
# Generate structure based on title keywords

# Base timing per element
ACTIVATION_TIME=2
TASK_CREATE_TIME=0.3
TASK_UPDATE_TIME=0.2
SPINNER_TIME=1
COMPLETION_TIME=0.3
RESULT_TIME=2

# Calculate total
calculate_duration() {
    local phases=$1
    local agents=$2

    total=$ACTIVATION_TIME
    total=$((total + phases * (TASK_CREATE_TIME + SPINNER_TIME + COMPLETION_TIME)))
    total=$((total + agents * 2))
    total=$((total + RESULT_TIME))

    echo $total
}

interface SkillDemoConfig {
  // Skill metadata
  skillName: string;           // e.g., "explore", "commit", "debug"
  skillCommand: string;        // e.g., "/ork:explore"
  hook: string;                // Attention-grabbing opening (5-7 words)
  primaryColor: string;        // Hex color for branding

  // Timeline structure
  phases: Phase[];             // Array of execution phases

  // Template-specific content
  simple: LevelConfig;         // Beginner level
  medium: LevelConfig;         // Intermediate level
  advanced: LevelConfig;       // Advanced level

  // Summary display
  summaryTitle: string;        // e.g., "📊 RESULTS"
  summaryTagline: string;      // e.g., "Explore any skill instantly"

  // Optional overrides
  duration?: number;           // Total video duration in seconds
  fps?: number;                // Frames per second
}

interface Phase {
  name: string;                // Full name: "Analyze", "Load References"
  shortName: string;           // Abbreviation: "Analyze", "Refs"
  duration?: number;           // Duration in frames for this phase
}

interface LevelConfig {
  name: string;                // "Simple", "Medium", "Advanced"
  description: string;         // Short description of complexity level
  inputCount: number;          // Number of inputs/commands required
  files: FileEntry[];          // Files created during execution
  references: ReferenceEntry[]; // Patterns loaded
  claudeResponse: string[];    // Multi-line AI response
  completionTime: string;      // Display duration: "8s", "12s"
  metrics: Record<string, string>; // Custom metrics
}

interface FileEntry {
  name: string;                // Path: "src/components/Button.tsx"
  status: "pending" | "in-progress" | "completed";
  lines: number;               // Lines of code
  language?: string;           // For syntax highlighting
}

interface ReferenceEntry {
  name: string;                // Pattern name: "cursor-pagination"
  status: "pending" | "loading" | "loaded";
  category: string;            // Category: "core", "api", "performance"
}

┌─────────────────────────────────────────────┐
│           HOOK (0-2s)                       │
│    "Explore any skill with one command"     │
├─────┬─────────────────┬──────────────────────┤
│ 🟢  │ 🟡              │ 🟣                   │
│ SIM │ MED             │ ADV                  │
├─────┼─────────────────┼──────────────────────┤
│ S1  │ S2              │ S3                   │
│ 50% │ 50% [progress]  │ 30% [progress]      │
├─────┴─────────────────┴──────────────────────┤
│           SUMMARY (17-20s)                  │
│    ┌─────┐  ┌─────┐  ┌─────┐                │
│    │ 8s  │  │ 12s │  │ 15s │                │
│    └─────┘  └─────┘  └─────┘                │
└─────────────────────────────────────────────┘

export const exploreSkillConfig: SkillDemoConfig = {
  skillName: "explore",
  skillCommand: "/ork:explore",
  hook: "Explore any skill instantly",
  primaryColor: "#8b5cf6",

  phases: [
    { name: "Load", shortName: "Load" },
    { name: "Parse", shortName: "Parse" },
    { name: "Display", shortName: "Show" },
  ],

  simple: {
    name: "Simple",
    description: "Single skill",
    inputCount: 1,
    files: [
      { name: "skill-output.md", status: "completed", lines: 42 },
    ],
    references: [
      { name: "skill-parser", status: "loaded", category: "core" },
    ],
    claudeResponse: [
      "I've loaded the Explore skill with:",
      "• Full skill metadata",
      "• All references and dependencies",
      "• Formatted for readability",
    ],
    completionTime: "8s",
    metrics: { "Refs Loaded": "3", "Lines": "42" },
  },

  medium: {
    name: "Medium",
    description: "Multiple skills + agent context",
    inputCount: 3,
    files: [
      { name: "skill-output.md", status: "completed", lines: 85 },
      { name: "agent-context.json", status: "completed", lines: 120 },
    ],
    references: [
      { name: "skill-parser", status: "loaded", category: "core" },
      { name: "agent-resolver", status: "loaded", category: "context" },
      { name: "markdown-renderer", status: "loaded", category: "formatting" },
    ],
    claudeResponse: [
      "Exploring skills with agent context:",
      "• 5 related agents identified",
      "• Cross-referenced patterns loaded",
      "• Context-aware display",
    ],
    completionTime: "12s",
    metrics: { "Refs Loaded": "9", "Lines": "205", "Agents": "5" },
  },

  advanced: {
    name: "Advanced",
    description: "Full ecosystem with analytics",
    inputCount: 5,
    files: [
      { name: "skill-graph.json", status: "completed", lines: 340 },
      { name: "ecosystem-analysis.json", status: "completed", lines: 210 },
      { name: "recommendations.md", status: "completed", lines: 125 },
    ],
    references: [
      { name: "skill-parser", status: "loaded", category: "core" },
      { name: "graph-analyzer", status: "loaded", category: "analysis" },
      { name: "agent-resolver", status: "loaded", category: "context" },
      { name: "ecosystem-mapper", status: "loaded", category: "discovery" },
      { name: "markdown-renderer", status: "loaded", category: "formatting" },
    ],
    claudeResponse: [
      "Full ecosystem analysis complete:",
      "• 12 related skills discovered",
      "• 8 agent touchpoints mapped",
      "• Dependency graph generated",
      "• AI-powered recommendations provided",
    ],
    completionTime: "15s",
    metrics: {
      "Refs Loaded": "15",
      "Lines": "675",
      "Agents": "8",
      "Skills": "12",
    },
  },

  summaryTitle: "📊 RESULTS",
  summaryTagline: "Explore any skill instantly with context",
};

import { TriTerminalRace, triTerminalRaceSchema } from "./components/TriTerminalRace";
import { exploreSkillConfig } from "./components/configs/explore-demo";

<Composition
  id="ExploreTriRace"
  component={TriTerminalRace}
  durationInFrames={30 * 20}  // 20 seconds at 30fps
  fps={30}
  width={1920}
  height={1080}
  schema={triTerminalRaceSchema}
  defaultProps={exploreSkillConfig}
/>

// Adjust racing speed ratios
const simpleProgress = Math.min(100, raceProgress * 1.3);  // Faster
const mediumProgress = Math.min(100, raceProgress * 1.0);  // Normal
const advancedProgress = Math.min(100, raceProgress * 0.7); // Slower

// Change color palette
const LEVEL_COLORS = {
  simple: "#22c55e",    // Green
  medium: "#f59e0b",    // Amber
  advanced: "#8b5cf6",  // Purple
};

// Adjust panel spacing
const PANEL_WIDTH = 600;
const PANEL_GAP = 30;

┌──────────────────────────────────────────────┐
│        HOOK + CODE OVERVIEW (0-2s)           │
│    ┌────────────────────────────────────┐    │
│    │  src/api/auth.ts                   │    │
│    │  12 lines, 3 key sections         │    │
│    └────────────────────────────────────┘    │
├──────────────────────────────────────────────┤
│    PHASE 1: ZOOM TO SECTION (2-8s)           │
│    ┌────────────────────────────────────┐    │
│    │  function validateToken() {        │    │
│    │  ▶ jwt.verify(token)               │    │
│    │    ├─ Signature check              │    │
│    │    └─ Expiry validation            │    │
│    └────────────────────────────────────┘    │
├──────────────────────────────────────────────┤
│    PHASE 2: ZOOM TO SECTION (8-15s)          │
│    [next section with annotations]           │
├──────────────────────────────────────────────┤
│           TIMELINE + SUMMARY (15-20s)        │
│    ✓ Validation  ✓ Error Handling  ✓ Export │
└──────────────────────────────────────────────┘

export const authApiProgressiveZoomConfig: SkillDemoConfig = {
  skillName: "auth-api",
  skillCommand: "/ork:code-walkthrough",
  hook: "JWT validation pattern explained",
  primaryColor: "#06b6d4",

  phases: [
    { name: "Token Extraction", shortName: "Extract" },
    { name: "Signature Validation", shortName: "Verify" },
    { name: "Expiry Check", shortName: "Expiry" },
    { name: "Error Handling", shortName: "Errors" },
  ],

  simple: {
    name: "Basic",
    description: "Core validation only",
    inputCount: 1,
    files: [
      { name: "src/auth/validate.ts", status: "completed", lines: 15, language: "typescript" },
    ],
    references: [
      { name: "jsonwebtoken", status: "loaded", category: "library" },
    ],
    claudeResponse: [
      "Basic JWT validation:",
      "• Extract token from headers",
      "• Verify with secret key",
      "• Return user data",
    ],
    completionTime: "6s",
    metrics: { "Sections": "1", "Lines": "15" },
  },

  medium: {
    name: "Production",
    description: "With error handling",
    inputCount: 3,
    files: [
      { name: "src/auth/validate.ts", status: "completed", lines: 35, language: "typescript" },
      { name: "src/auth/errors.ts", status: "completed", lines: 20, language: "typescript" },
    ],
    references: [
      { name: "jsonwebtoken", status: "loaded", category: "library" },
      { name: "error-handling-rfc9457", status: "loaded", category: "patterns" },
    ],
    claudeResponse: [
      "Production-ready validation:",
      "• Extract from Authorization header",
      "• Verify signature and expiry",
      "• Handle 5 error cases",
      "• Return structured errors",
    ],
    completionTime: "12s",
    metrics: { "Sections": "3", "Lines": "55", "Errors": "5" },
  },

  advanced: {
    name: "Enterprise",
    description: "Multi-tenant with caching",
    inputCount: 5,
    files: [
      { name: "src/auth/validate.ts", status: "completed", lines: 65, language: "typescript" },
      { name: "src/auth/cache.ts", status: "completed", lines: 40, language: "typescript" },
      { name: "src/auth/revocation.ts", status: "completed", lines: 30, language: "typescript" },
    ],
    references: [
      { name: "jsonwebtoken", status: "loaded", category: "library" },
      { name: "redis-patterns", status: "loaded", category: "caching" },
      { name: "error-handling-rfc9457", status: "loaded", category: "patterns" },
      { name: "multi-tenancy", status: "loaded", category: "architecture" },
    ],
    claudeResponse: [
      "Enterprise JWT validation:",
      "• Multi-tenant token validation",
      "• Redis-backed revocation list",
      "• Signature + expiry + revocation checks",
      "• Structured error responses",
      "• Performance metrics collection",
    ],
    completionTime: "18s",
    metrics: { "Sections": "5", "Lines": "135", "Errors": "8", "Caching": "Redis" },
  },

  summaryTitle: "🔐 JWT VALIDATION",
  summaryTagline: "From basic to enterprise-ready",
};

// Zoom curve: ease in/out for smooth transitions
const zoom = Easing.bezier(0.25, 0.1, 0.25, 1)(zoomProgress);

// Annotation fade in/out
const annotationOpacity = interpolate(
  frame,
  [phaseStart, phaseStart + 10, phaseEnd - 10, phaseEnd],
  [0, 1, 1, 0],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

┌──────────────────────────────────────────────┐
│             HOOK (0-2s)                      │
│    "Stop wasting time on repetitive tasks"   │
├─────────────────┬──────────────────────────┤
│                 │                          │
│     WITHOUT     │      WITH {SKILL}        │
│  SKILL          │                          │
│                 │                          │
│  Manual steps   │  Automated execution     │
│  120s ⏱️         │  8s ⚡                   │
│  Error-prone    │  Guaranteed consistency  │
│  Context lost   │  Full context preserved │
│                 │                          │
│  ✗ Slow         │  ✓ Fast                  │
│  ✗ Error-prone  │  ✓ Reliable              │
│  ✗ Tedious      │  ✓ Delightful            │
│                 │                          │
├─────────────────┴──────────────────────────┤
│  MERGE → UNIFIED VIEW (10-15s)              │
│    ┌───────────────────────────────────┐    │
│    │  Result: Enhanced workflow       │    │
│    │  Time: 92s saved per task        │    │
│    │  Quality: 100% consistency       │    │
│    │  Impact: 15 hours/week recovered │    │
│    └───────────────────────────────────┘    │
└──────────────────────────────────────────────┘

export const buildOptimizationConfig: SkillDemoConfig = {
  skillName: "build-optimizer",
  skillCommand: "/ork:build-optimizer",
  hook: "Turn 2-minute builds into 15 seconds",
  primaryColor: "#22c55e",

  phases: [
    { name: "Analyze", shortName: "Analyze" },
    { name: "Optimize", shortName: "Optimize" },
    { name: "Build", shortName: "Build" },
  ],

  simple: {
    name: "Without Optimization",
    description: "Standard build process",
    inputCount: 1,
    files: [
      { name: "dist/bundle.js", status: "completed", lines: 250000 },
    ],
    references: [],
    claudeResponse: [
      "Building with standard webpack config...",
      "Processing 1,200 modules...",
      "Waiting for optimization...",
    ],
    completionTime: "120s",
    metrics: { "Build Time": "120s", "Bundle Size": "2.5 MB", "Chunks": "8" },
  },

  medium: {
    name: "With Optimization",
    description: "Optimized build process",
    inputCount: 3,
    files: [
      { name: "dist/bundle.js", status: "completed", lines: 85000 },
      { name: "dist/vendor.js", status: "completed", lines: 120000 },
    ],
    references: [
      { name: "webpack-optimization", status: "loaded", category: "tooling" },
    ],
    claudeResponse: [
      "Analyzing dependencies...",
      "Applying code splitting...",
      "Minifying & compressing...",
      "Optimized bundle ready",
    ],
    completionTime: "45s",
    metrics: { "Build Time": "45s", "Bundle Size": "1.2 MB", "Chunks": "3" },
  },

  advanced: {
    name: "Advanced Optimization",
    description: "Production-ready optimizations",
    inputCount: 5,
    files: [
      { name: "dist/main.js", status: "completed", lines: 45000 },
      { name: "dist/vendor.js", status: "completed", lines: 95000 },
      { name: "dist/async-routes.js", status: "completed", lines: 25000 },
    ],
    references: [
      { name: "webpack-optimization", status: "loaded", category: "tooling" },
      { name: "dynamic-imports", status: "loaded", category: "patterns" },
      { name: "cache-busting", status: "loaded", category: "deployment" },
    ],
    claudeResponse: [
      "Advanced optimization pipeline:",
      "• Tree-shaking unused code",
      "• Dynamic imports for routes",
      "• Service worker caching",
      "• Image optimization",
      "• Ready for production",
    ],
    completionTime: "15s",
    metrics: {
      "Build Time": "15s",
      "Bundle Size": "650 KB",
      "Chunks": "4",
      "Gzip": "185 KB",
    },
  },

  summaryTitle: "⚡ PERFORMANCE GAINS",
  summaryTagline: "From 120s to 15s: 8x speedup",
};

// Smooth merge from split to unified
const mergeProgress = interpolate(
  frame,
  [splitEnd, mergeStart, mergeEnd],
  [0, 0, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

const leftPanelX = interpolate(mergeProgress, [0, 1], [-960, 0]);
const rightPanelX = interpolate(mergeProgress, [0, 1], [960, 0]);

┌──────────────────────────────────────────────┐
│        TITLE STAMP (0-3s)                    │
│    "OrchestKit"                              │
│    68 skills. 38 agents. One plugin.         │
├──────────────────────────────────────────────┤
│    SOCIAL PROOF CARDS (3-7.5s)               │
│    ┌─────────┐  ┌─────────┐  ┌─────────┐   │
│    │ @sarah  │  │ @marcus │  │ @priya  │   │
│    │ "..."   │  │ "..."   │  │ "..."   │   │
│    └─────────┘  └─────────┘  └─────────┘   │
├──────────────────────────────────────────────┤
│    TERMINAL CAPTURE (7.5-11.5s)              │
│    ┌────────────────────────────┐            │
│    │  $ /ork:implement ...     │ ← tilted   │
│    │  ✓ Created 3 files        │   frame    │
│    └────────────────────────────┘            │
├──────────────────────────────────────────────┤
│    STATS REVEAL (11.5-13.5s)                 │
│        197        36        111              │
│       skills    agents     hooks             │
├──────────────────────────────────────────────┤
│    CTA (13.5-17s)                            │
│    Get started                               │
│    ┌─/plugin install ork─┐                   │
│    └─────────────────────┘                   │
└──────────────────────────────────────────────┘

interface ScrapbookDemoProps {
  title: string;           // Hero text (e.g., "OrchestKit")
  tagline: string;         // Subtitle
  socialCards: Array<{     // 2-4 social proof quotes
    author: string;
    text: string;
    handle?: string;
  }>;
  terminalContent?: string; // Terminal output as multi-line string
  stats: {
    skills: number;
    agents: number;
    hooks: number;
  };
  ctaCommand: string;      // e.g., "/plugin install ork"
  accentColor?: string;    // Override default teal accent
}

const skillName = "my-skill";
const skillCommand = "/ork:my-skill";

// Read from SKILL.md frontmatter
const description = "What this skill does";
const tags = ["tag1", "tag2"];

// Choose a brand color
const primaryColor = "#8b5cf6"; // Or use agent color palette

const phases = [
  { name: "Load Context", shortName: "Load" },
  { name: "Analyze Input", shortName: "Analyze" },
  { name: "Generate Output", shortName: "Generate" },
  { name: "Format Results", shortName: "Format" },
];

simple: {
  name: "Simple",
  description: "Basic use case",
  inputCount: 1,
  files: [
    { name: "output.txt", status: "completed", lines: 20 },
  ],
  references: [
    { name: "core-pattern", status: "loaded", category: "core" },
  ],
  claudeResponse: [
    "Simple execution:",
    "• Loaded core pattern",
    "• Generated basic output",
  ],
  completionTime: "5s",
  metrics: { "Items": "1", "Lines": "20" },
},

medium: {
  name: "Medium",
  description: "Standard use case",
  inputCount: 3,
  files: [
    { name: "output.json", status: "completed", lines: 80 },
    { name: "report.md", status: "completed", lines: 45 },
  ],
  references: [
    { name: "core-pattern", status: "loaded", category: "core" },
    { name: "formatting", status: "loaded", category: "output" },
  ],
  claudeResponse: [
    "Standard workflow:",
    "• Processed 3 inputs",
    "• Applied patterns",
    "• Generated formatted output",
  ],
  completionTime: "10s",
  metrics: { "Items": "3", "Lines": "125", "Formats": "2" },
},

advanced: {
  name: "Advanced",
  description: "Full ecosystem with analysis",
  inputCount: 8,
  files: [
    { name: "analysis.json", status: "completed", lines: 250 },
    { name: "recommendations.md", status: "completed", lines: 120 },
    { name: "metrics.csv", status: "completed", lines: 45 },
  ],
  references: [
    { name: "core-pattern", status: "loaded", category: "core" },
    { name: "analysis-engine", status: "loaded", category: "analysis" },
    { name: "formatting", status: "loaded", category: "output" },
    { name: "visualization", status: "loaded", category: "display" },
  ],
  claudeResponse: [
    "Advanced analysis complete:",
    "• Processed 8 complex inputs",
    "• Applied deep analysis",
    "• Generated insights",
    "• Created visualizations",
  ],
  completionTime: "18s",
  metrics: {
    "Items": "8",
    "Lines": "415",
    "Formats": "3",
    "Insights": "12",
  },
},

summaryTitle: "📊 ANALYSIS COMPLETE",
summaryTagline: "From simple to advanced in one command",

import { TriTerminalRace } from "./components/TriTerminalRace";
import { mySkillConfig } from "./components/configs/my-skill";

<Composition
  id="MySkillDemo"
  component={TriTerminalRace}
  durationInFrames={30 * 20}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={mySkillConfig}
/>

interface ComponentProps {
  frame: number;              // Current animation frame
  fps: number;                // Frames per second
  primaryColor?: string;      // Brand color
  theme?: "dark" | "light";   // Visual theme
}

[Verb] [noun] in [time frame]
→ "Create docs in 30 seconds"

[Number] [benefit] with [action]
→ "8x faster builds with code splitting"

Stop [pain point]
→ "Stop waiting for optimizations"

From [bad] to [good] with [tool]
→ "From manual to automated with one command"

remotion render Root MySkillDemo out/my-skill-demo.mp4

remotion render Root MySkillDemo out/horizontal.mp4 --props='{"format":"horizontal"}'
remotion render Root MySkillDemo out/vertical.mp4 --props='{"format":"vertical"}'
remotion render Root MySkillDemo out/square.mp4 --props='{"format":"square"}'

remotion render Root MySkillDemo out/custom.mp4 \
  --props='{"hook":"Custom hook text","primaryColor":"#ff00ff"}'

const Terminal: React.FC<Props> = ({ frame, fps }) => {
  const LINE_HEIGHT = 22;
  const MAX_VISIBLE = 10;

  // Header stays pinned (command + task created message)
  const visibleHeader = HEADER_LINES.filter(line => frame >= line.frame);

  // Content scrolls to keep latest visible
  const visibleContent = CONTENT_LINES.filter(line => frame >= line.frame);
  const contentHeight = visibleContent.length * LINE_HEIGHT;
  const scrollOffset = Math.max(0, contentHeight - MAX_VISIBLE * LINE_HEIGHT);

  return (
    <div style={{ height: 420 }}>
      {/* Pinned header */}
      <div style={{ borderBottom: "1px solid #21262d" }}>
        {visibleHeader.map((line, i) => <TerminalLine key={i} {...line} />)}
      </div>

      {/* Scrolling content */}
      <div style={{ overflow: "hidden", height: 280 }}>
        <div style={{ transform: `translateY(-${scrollOffset}px)` }}>
          {visibleContent.map((line, i) => <TerminalLine key={i} {...line} />)}
        </div>
      </div>
    </div>
  );
};

const AGENT_COLORS = {
  workflow:     "#8b5cf6",  // Purple - workflow-architect
  backend:      "#06b6d4",  // Cyan - backend-system-architect
  security:     "#ef4444",  // Red - security-auditor
  performance:  "#22c55e",  // Green - frontend-performance-engineer
  frontend:     "#f59e0b",  // Amber - frontend-ui-developer
  data:         "#ec4899",  // Pink - data-pipeline-engineer
  llm:          "#6366f1",  // Indigo - llm-integrator
  docs:         "#14b8a6",  // Teal - documentation-specialist
};

const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

const TaskSpinner: React.FC<{ frame: number; text: string; color: string }> = ({ frame, text, color }) => {
  const spinnerIdx = Math.floor(frame / 3) % SPINNER.length;
  return (
    <div style={{ color }}>
      <span style={{ marginRight: 8 }}>{SPINNER[spinnerIdx]}</span>
      {text}
    </div>
  );
};