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 (Version on version, 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":"0","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