Benchmark bars

3-5 models bars grow with logos at the base; the winner takes the accent

Prompt for your agentpaste into Claude Code or Codex

Add the "Benchmark bars" video component (Terminal-Bench 4.0, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/benchmark-bars.zip?v=e7732fcd2ab1 and unzip it into components/benchmark-bars/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/benchmark-bars && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o benchmark-bars.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.

Code

One file. The project download adds the fonts, skins and motion kit it runs on.

index.htmlhtmlDownload

1<!doctype html>
2<html lang="en" data-composition-variables='[
3  {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Terminal-Bench 4.0"},{"value":"1","label":"ARC-AGI-3"},{"value":"2","label":"Humanity&#39;s Last Exam"}]},
4  {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}
5]'>
6  <head>
7    <meta charset="UTF-8" />
8    <meta name="viewport" content="width=1920, height=1080" />
9    <link rel="stylesheet" href="assets/fonts/fonts.css" />
10    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
11    <script src="assets/kit/motion/motion.js"></script>
12    <style>
13      * { margin: 0; padding: 0; box-sizing: border-box; }
14      html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage, #F5F5F4); }
15      body {
16        font-family: 'Inter', sans-serif;
17        -webkit-font-smoothing: antialiased;
18        text-rendering: geometricPrecision;
19        font-feature-settings: 'cv11' 1;
20      }
21      #root { position: relative; width: 100%; height: 100%; overflow: hidden; }
22      #stage { position: absolute; inset: 0; background: var(--stage); }
23      #cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
24      /* The card is drawn at native UI size and presented at 1.9x (about 1140 px, 59% of the frame). */
25      #zoom { zoom: 1.9; }
26 
27      /* ---------- the card ---------- */
28      #card {
29        position: relative;
30        width: 600px;
31        padding: 28px 32px 48px;
32        border-radius: 20px;
33        background: var(--surface);
34        box-shadow: var(--card-shadow);
35      }
36      /* two type sizes in the whole card: 20 (title, values) and 15 (everything else) */
37      .title {
38        font-weight: 600; font-size: 20px; line-height: 24px;
39        letter-spacing: -0.02em; color: var(--ink);
40      }
41      .sub {
42        margin-top: 4px;
43        font-weight: 500; font-size: 15px; line-height: 20px;
44        letter-spacing: -0.01em; color: var(--ink-2);
45      }
46      .sub .dot { padding: 0 7px; }
47 
48      .chart { position: relative; margin-top: 28px; }

Open full file

Download project1 MB