| <!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> |
| |
| .bm-main { |
| max-width: 1100px; |
| margin: 0 auto; |
| padding: 40px 20px 8px; |
| } |
| |
| |
| .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; |
| } |
| |
| |
| .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); } |
| |
| |
| .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); } |
| |
| |
| .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; |
| } |
| |
| |
| .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; } |
| |
| |
| .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; } |
| |
| |
| .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> |
|
|
