Score jump

Old score, arrow, new score, delta counts up

Prompt for your agentpaste into Claude Code or Codex

Add the "Score jump" video component (Against a human baseline, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/score-jump.zip?v=c6ad5d5fab54 and unzip it into components/score-jump/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/score-jump && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o score-jump.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":"Version on version"},{"value":"1","label":"Sibling model"},{"value":"2","label":"Against a human baseline"}]},
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 { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
15      body.is-dark { background: #0e0e0f; }
16 
17      /* ---------- stage tokens (DESIGN.md) ---------- */
18      #root {
19        --stage: #f5f5f4;
20        --surface: #ffffff;
21        --ink: #0a0a0a;
22        --ink-2: #6b6b6b;
23        --ink-3: #a3a3a3;
24        --hair: rgba(0, 0, 0, 0.08);
25        --link: #a3a3a3;
26        --track: rgba(0, 0, 0, 0.055);
27        --track-edge: inset 0 0.5px 1px rgba(0, 0, 0, 0.07);
28        --fill-old: #cfcfce;
29        /* native px; the card is presented at zoom 2, so these land at twice the size.
30           A hairline ring, a sharp contact shadow and one soft diffuse shadow. */
31        --card-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 0.5px 1px rgba(0, 0, 0, 0.05), 0 2px 5px -1px rgba(0, 0, 0, 0.035), 0 14px 32px -14px rgba(0, 0, 0, 0.16);
32        width: 100%; height: 100%; position: relative; overflow: hidden;
33        font-family: "Inter", sans-serif;
34        -webkit-font-smoothing: antialiased;
35        text-rendering: optimizeLegibility;
36      }
37      #root.is-dark {
38        --stage: #0e0e0f;
39        --surface: #18181a;
40        --ink: #fafafa;
41        --ink-2: #a1a1a1;
42        --ink-3: #5e5e60;
43        --hair: rgba(255, 255, 255, 0.1);
44        --link: #5e5e60;
45        --track: rgba(255, 255, 255, 0.075);
46        --track-edge: inset 0 0.5px 1px rgba(0, 0, 0, 0.4);
47        --fill-old: #545457;
48        --card-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.07), inset 0 0.5px 0 rgba(255, 255, 255, 0.06), 0 14px 32px -12px rgba(0, 0, 0, 0.75);

Open full file

Download project1 MB