Leaderboard climb

The new model slides into #1 and the rest shift down

Prompt for your agentpaste into Claude Code or Codex

Add the "Leaderboard climb" video component (Artificial Analysis, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/leaderboard-climb.zip?v=05a47b131e22 and unzip it into components/leaderboard-climb/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/leaderboard-climb && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o leaderboard-climb.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":"LMArena"},{"value":"1","label":"Artificial Analysis"},{"value":"2","label":"OpenRouter"}]},
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<link rel="stylesheet" href="assets/skins/device/skin.css" />
11<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
12<script src="assets/kit/motion/motion.js"></script>
13<script src="assets/skins/device/icons.js"></script>
14<style>
15  * { margin: 0; padding: 0; box-sizing: border-box; }
16  html, body { width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }
17  html[data-theme="dark"], html[data-theme="dark"] body { background: #0E0E0F; }
18  #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: Inter, sans-serif; }
19 
20  /* ---------- stage (DESIGN.md): flat, no texture ---------- */
21  #stage { position: absolute; inset: 0; background: #F5F5F4; }
22  #stage[data-theme="dark"] { background: #0E0E0F; }
23  #cam { position: absolute; inset: 0; }
24  #heroPos { position: absolute; }
25  #enter { position: absolute; inset: 0; }
26  #heroZoom { position: relative; }
27  #dev { position: absolute; inset: 0; }
28 
29  /* small icon helper (inline SVG strokes) */
30  .ic { display: inline-flex; flex: none; }
31  .ic svg { width: 100%; height: 100%; display: block; }
32 
33  /* Chrome page zoom box (Chrome's own page zoom: 100% / 110%) */
34  #pz { position: absolute; left: 0; top: 0; overflow: hidden; }
35 
36  /* Chrome loading state: reload ↔ stop, favicon ↔ spinner, hover + pressed circle */
37  #crReload { position: relative; }
38  #crReload > i { position: absolute; inset: 0; border-radius: 50%; background: var(--dv-cr-hover); opacity: 0; }
39  #crReload > .ico { grid-area: 1 / 1; display: grid; place-items: center; position: relative; }
40  #crReload > .ico.st { visibility: hidden; }
41  #crFav > * { grid-area: 1 / 1; }
42  #crFav .sp { visibility: hidden; width: 16px; height: 16px; color: var(--dv-cr-spinner); }
43  #crFav .sp svg { width: 16px; height: 16px; display: block; }
44  #cur { opacity: 0; }
45 
46  /* ---------- the moving rows (shared by all three sites) ---------- */
47  .lb-rows { position: absolute; left: 0; right: 0; }
48  .lb-row { position: absolute; left: 0; right: 0; top: 0; }

Open full file

Download project1 MB