index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AI Video Generation Benchmark — Which LLM Codes the Best Video?</title>
  <meta name="description" content="AI video generation benchmark: 12 AI models get the same creative briefs and generate motion-graphics code that's rendered to video. See the best LLM for video — Claude vs Gemini vs GPT — in a side-by-side leaderboard and gallery." />
  <meta name="keywords" content="ai video generation benchmark, best llm for video, llm motion graphics benchmark, claude vs gemini vs gpt video" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./shared/ui.css" />
  <style>
    /* ----- Benchmark-specific layout, layered on the shared dark theme ----- */
    .bm-main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 20px 8px;
    }

    /* Hero */
    .bm-hero { margin-bottom: 28px; }
    .bm-hero-emoji { font-size: 38px; line-height: 1; margin-bottom: 12px; }
    .bm-title {
      margin: 0 0 12px;
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 800;
      letter-spacing: -0.9px;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .bm-subtitle { margin: 0; max-width: 680px; color: var(--text-secondary); font-size: 16px; }
    .bm-method {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin: 20px 0 14px;
      max-width: 820px;
      padding: 14px 16px;
      border: 1px solid var(--amber-glow);
      border-radius: 12px;
      background: var(--amber-dim);
    }
    .bm-method-icon { font-size: 18px; line-height: 1.4; }
    .bm-method-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
    .bm-method-body strong { color: var(--text-primary); }
    .bm-updated {
      display: inline-block;
      margin-top: 4px;
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--bg-elevated);
      color: var(--text-muted);
      font-size: 12px;
    }

    /* Section heading */
    .bm-section { margin-top: 44px; }
    .bm-h2 {
      margin: 0 0 4px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.4px;
      color: var(--text-primary);
    }
    .bm-h2-note { margin: 0 0 16px; font-size: 12.5px; color: var(--text-muted); }

    /* Leaderboard table */
    .bm-table-wrap {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .bm-scroll-hint { display: none; margin: 0 0 8px; font-size: 11px; color: var(--text-muted); }
    .bm-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13.5px; }
    .bm-table th {
      padding: 11px 14px;
      text-align: left;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      background: var(--bg-elevated);
      border-bottom: 1px solid var(--border);
    }
    .bm-table td {
      padding: 11px 14px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .bm-table tbody tr:last-child td { border-bottom: none; }
    .bm-table tbody tr:hover { background: var(--bg-card); }
    .bm-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .bm-model-name { font-weight: 600; color: var(--text-primary); }
    .bm-model-prov { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .bm-num { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .bm-rendered { font-weight: 700; color: var(--text-primary); }
    .bm-rendered.is-full { color: #4ade80; }
    .bm-rendered.is-partial { color: #fcd34d; }
    .bm-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      background: var(--amber-dim);
      border: 1px solid var(--amber-glow);
      color: #fcd9a0;
    }
    .bm-badge.is-or { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }

    /* Per-prompt sections */
    .bm-prompt { margin-top: 40px; }
    .bm-prompt-head {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
    }
    .bm-prompt-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
    .bm-prompt-spec {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      color: var(--text-secondary);
    }
    .bm-prompt-details {
      margin-bottom: 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .bm-prompt-details summary {
      cursor: pointer;
      padding: 10px 14px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-secondary);
      list-style: none;
    }
    .bm-prompt-details summary::-webkit-details-marker { display: none; }
    .bm-prompt-details summary::before { content: "▸ "; color: var(--amber); }
    .bm-prompt-details[open] summary::before { content: "▾ "; }
    .bm-prompt-text {
      padding: 0 14px 14px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      white-space: pre-wrap;
    }

    /* Video grid — column width tuned to the brief's aspect ratio */
    .bm-grid { display: grid; gap: 16px; }
    .bm-grid[data-aspect="16:9"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .bm-grid[data-aspect="1:1"]  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .bm-grid[data-aspect="9:16"] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

    .bm-card { display: flex; flex-direction: column; gap: 7px; }
    .bm-card video {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #000;
    }
    .bm-card-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
    .bm-card-sub { font-size: 11.5px; color: var(--text-muted); }
    .bm-card-meta { font-size: 11px; color: var(--text-muted); }

    .bm-card.is-fail .bm-fail {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px;
      border: 1px dashed var(--border-hover);
      border-radius: 10px;
      background: var(--bg-elevated);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
    }
    .bm-card.is-fail .bm-card-name,
    .bm-card.is-fail .bm-card-sub { opacity: 0.7; }

    /* CTA */
    .bm-cta {
      margin: 48px 0 8px;
      padding: 26px 24px;
      border: 1px solid var(--amber-glow);
      border-radius: 14px;
      background: var(--bg-card);
      text-align: center;
    }
    .bm-cta h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.3px; }
    .bm-cta p { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); }
    .bm-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 8px;
      background: var(--grad);
      color: #fff !important;
      font-size: 14px;
      font-weight: 700;
    }
    .bm-cta-btn:hover { filter: brightness(1.08); text-decoration: none; }

    /* Loading / error */
    .bm-state {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 200px;
      color: var(--text-secondary);
      font-size: 15px;
    }
    .bm-state.is-error { color: #fca5a5; flex-direction: column; }
    .bm-state .bm-retry { color: var(--amber); font-weight: 600; }

    @media (max-width: 560px) {
      .bm-main { padding-top: 28px; }
      .bm-scroll-hint { display: block; }
      .bm-grid[data-aspect="9:16"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./app.js"></script>
</body>
</html>