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 (OpenRouter, 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":"2","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