{
  "cuts": [
    {
      "id": "scene-1-hero",
      "source": "",
      "in_seconds": 0,
      "out_seconds": 4,
      "type": "hero_title",
      "text": "FROM CODE TO SCREEN",
      "heroSubtitle": "The life of a web request"
    },
    {
      "id": "scene-2-text-card",
      "source": "",
      "in_seconds": 4,
      "out_seconds": 10,
      "type": "text_card",
      "text": "You type a URL and press Enter. In the next 200 milliseconds, a symphony of systems springs into action.",
      "fontSize": 44,
      "color": "#F8FAFC",
      "backgroundColor": "#0F172A"
    },
    {
      "id": "scene-3-kpi-grid",
      "source": "",
      "in_seconds": 10,
      "out_seconds": 16,
      "type": "kpi_grid",
      "title": "The Invisible Timeline",
      "backgroundColor": "#0F172A",
      "columns": 4,
      "chartAnimation": "count-up",
      "chartData": [
        {
          "label": "DNS Lookups",
          "value": 150,
          "prefix": "",
          "suffix": " ms",
          "change": 0,
          "icon": "globe"
        },
        {
          "label": "TCP Handshake",
          "value": 50,
          "prefix": "",
          "suffix": " ms",
          "change": 0,
          "icon": "link"
        },
        {
          "label": "TLS Setup",
          "value": 100,
          "prefix": "",
          "suffix": " ms",
          "change": 0,
          "icon": "lock"
        },
        {
          "label": "First Byte",
          "value": 200,
          "prefix": "",
          "suffix": " ms",
          "change": 0,
          "icon": "zap"
        }
      ]
    },
    {
      "id": "scene-4-bar-chart",
      "source": "",
      "in_seconds": 16,
      "out_seconds": 22,
      "type": "bar_chart",
      "title": "What Takes the Longest?",
      "backgroundColor": "#0F172A",
      "chartAnimation": "grow-up",
      "showGrid": true,
      "showValues": true,
      "chartColors": [
        "#2563EB",
        "#F59E0B",
        "#10B981",
        "#EC4899",
        "#06B6D4",
        "#8B5CF6"
      ],
      "chartData": [
        {
          "label": "DNS",
          "value": 150
        },
        {
          "label": "TCP",
          "value": 50
        },
        {
          "label": "TLS",
          "value": 100
        },
        {
          "label": "Server Processing",
          "value": 120
        },
        {
          "label": "Content Download",
          "value": 80
        },
        {
          "label": "DOM Parsing",
          "value": 200
        }
      ]
    },
    {
      "id": "scene-5-progress-bar",
      "source": "",
      "in_seconds": 22,
      "out_seconds": 28,
      "type": "progress_bar",
      "title": "Request Journey",
      "backgroundColor": "#0F172A",
      "progress": 100,
      "progressLabel": "Complete",
      "progressColor": "#10B981",
      "progressAnimation": "fill",
      "progressSegments": [
        {
          "value": 20,
          "color": "#2563EB",
          "label": "DNS"
        },
        {
          "value": 10,
          "color": "#F59E0B",
          "label": "TCP"
        },
        {
          "value": 15,
          "color": "#10B981",
          "label": "TLS"
        },
        {
          "value": 20,
          "color": "#EC4899",
          "label": "Server"
        },
        {
          "value": 15,
          "color": "#06B6D4",
          "label": "Download"
        },
        {
          "value": 20,
          "color": "#8B5CF6",
          "label": "Parse"
        }
      ]
    },
    {
      "id": "scene-6-comparison",
      "source": "",
      "in_seconds": 28,
      "out_seconds": 34,
      "type": "comparison",
      "title": "Connection Efficiency",
      "backgroundColor": "#0F172A",
      "color": "#F8FAFC",
      "leftLabel": "HTTP/1.1",
      "leftValue": "6 connections",
      "rightLabel": "HTTP/2",
      "rightValue": "1 connection (multiplexed)",
      "changeIndicator": "10x faster",
      "changeDirection": "up"
    },
    {
      "id": "scene-7-pie-chart",
      "source": "",
      "in_seconds": 34,
      "out_seconds": 40,
      "type": "pie_chart",
      "title": "Average Web Page Composition",
      "backgroundColor": "#0F172A",
      "donut": true,
      "centerLabel": "Total",
      "centerValue": "2.5 MB",
      "chartAnimation": "spin",
      "showLegend": true,
      "chartData": [
        {
          "label": "Images",
          "value": 50
        },
        {
          "label": "JavaScript",
          "value": 25
        },
        {
          "label": "CSS",
          "value": 10
        },
        {
          "label": "HTML",
          "value": 5
        },
        {
          "label": "Fonts",
          "value": 5
        },
        {
          "label": "Other",
          "value": 5
        }
      ]
    },
    {
      "id": "scene-8-callout",
      "source": "",
      "in_seconds": 40,
      "out_seconds": 46,
      "type": "callout",
      "title": "Pro Tip",
      "text": "The fastest request is the one you never make. Use caching, CDNs, and lazy loading to skip steps entirely.",
      "backgroundColor": "#1E293B",
      "color": "#E2E8F0",
      "callout_type": "tip"
    },
    {
      "id": "scene-9-stat-card",
      "source": "",
      "in_seconds": 46,
      "out_seconds": 50,
      "type": "stat_card",
      "stat": "200",
      "subtitle": "The status code that means everything worked",
      "accentColor": "#10B981",
      "backgroundColor": "#0F172A"
    }
  ],
  "overlays": [
    {
      "id": "overlay-1-request",
      "in_seconds": 4,
      "out_seconds": 10,
      "type": "section_title",
      "text": "THE REQUEST",
      "subtitle": "It all starts with a URL",
      "accentColor": "#2563EB",
      "position": "top-left"
    },
    {
      "id": "overlay-2-timing",
      "in_seconds": 10,
      "out_seconds": 22,
      "type": "section_title",
      "text": "TIMING",
      "subtitle": "Milliseconds matter",
      "accentColor": "#F59E0B",
      "position": "top-left"
    },
    {
      "id": "overlay-3-optimization",
      "in_seconds": 28,
      "out_seconds": 40,
      "type": "section_title",
      "text": "OPTIMIZATION",
      "subtitle": "Making requests faster",
      "accentColor": "#10B981",
      "position": "top-left"
    }
  ],
  "captions": [
    {
      "id": "caption-1",
      "in_seconds": 0,
      "out_seconds": 4,
      "text": "FROM CODE TO SCREEN: The life of a web request"
    },
    {
      "id": "caption-2",
      "in_seconds": 4,
      "out_seconds": 10,
      "text": "You type a URL and press Enter. In the next 200 milliseconds, a symphony of systems springs into action."
    },
    {
      "id": "caption-3",
      "in_seconds": 10,
      "out_seconds": 16,
      "text": "The Invisible Timeline: DNS, TCP, TLS, and First Byte all happen in milliseconds"
    },
    {
      "id": "caption-4",
      "in_seconds": 16,
      "out_seconds": 22,
      "text": "DOM Parsing takes the longest at 200ms. DNS lookups are second at 150ms."
    },
    {
      "id": "caption-5",
      "in_seconds": 22,
      "out_seconds": 28,
      "text": "The complete request journey from DNS to DOM parsing takes approximately 700ms total"
    },
    {
      "id": "caption-6",
      "in_seconds": 28,
      "out_seconds": 34,
      "text": "HTTP/2 multiplexing allows one connection instead of six, making requests 10x faster"
    },
    {
      "id": "caption-7",
      "in_seconds": 34,
      "out_seconds": 40,
      "text": "Images dominate modern web pages at 50% of total size, averaging 2.5 MB per page"
    },
    {
      "id": "caption-8",
      "in_seconds": 40,
      "out_seconds": 46,
      "text": "Pro Tip: The fastest request is the one you never make. Use caching, CDNs, and lazy loading."
    },
    {
      "id": "caption-9",
      "in_seconds": 46,
      "out_seconds": 50,
      "text": "Status 200: Everything worked perfectly"
    }
  ],
  "audio": {}
}
