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 (Humanity's Last Exam, 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":"2","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