Same prompt race

One prompt into two real app windows; timers run; finish order lands

Prompt for your agentpaste into Claude Code or Codex

Add the "Same prompt race" video component (Codex vs Claude Code, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/same-prompt-race.zip?v=0f75058a9de8 and unzip it into components/same-prompt-race/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/same-prompt-race && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o same-prompt-race.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":"ChatGPT vs Claude"},{"value":"1","label":"Codex vs Claude Code"},{"value":"2","label":"Gemini vs Grok"}]},
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    <title>Same prompt race</title>
10    <link rel="stylesheet" href="assets/fonts/fonts.css" />
11    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
12    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
13    <link rel="stylesheet" href="assets/skins/codex/skin.css" />
14    <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />
15    <link rel="stylesheet" href="assets/skins/gemini/skin.css" />
16    <link rel="stylesheet" href="assets/skins/grok/skin.css" />
17    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
18    <script src="assets/kit/motion/motion.js"></script>
19    <script src="assets/skins/chatgpt/icons.js"></script>
20    <script src="assets/skins/claude/icons.js"></script>
21    <script src="assets/skins/codex/icons.js"></script>
22    <script src="assets/skins/claude-code/icons.js"></script>
23    <script src="assets/skins/gemini/icons.js"></script>
24    <script src="assets/skins/grok/icons.js"></script>
25    <style>
26      * { margin: 0; padding: 0; box-sizing: border-box; }
27      /* DESIGN.md stage tokens */
28      :root {
29        --stage: #f5f5f4; --surface: #ffffff; --ink: #0a0a0a; --ink-2: #6b6b6b; --ink-3: #a3a3a3;
30        --hair: rgba(0, 0, 0, 0.08);
31        --win-drop: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.25);
32        --win-lift: 0 2px 4px rgba(0, 0, 0, 0.05), 0 44px 90px -26px rgba(0, 0, 0, 0.34);
33        --pill-drop: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -14px rgba(0, 0, 0, 0.22);
34        --rank-tint: rgba(10, 10, 10, 0.06);
35        /* the one host terminal both CLIs run in (macOS Terminal title bar) */
36        --tb-bg: #ececec; --tb-ink: #555555; --tb-line: rgba(0, 0, 0, 0.09);
37      }
38      html.is-dark {
39        --stage: #0e0e0f; --surface: #18181a; --ink: #fafafa; --ink-2: #a1a1a1; --ink-3: #5e5e60;
40        --hair: rgba(255, 255, 255, 0.10);
41        --win-drop: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
42        --win-lift: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 44px 90px -26px rgba(0, 0, 0, 0.95);
43        --pill-drop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px -14px rgba(0, 0, 0, 0.8);
44        --rank-tint: rgba(250, 250, 250, 0.09);
45        --tb-bg: #2b2b2b; --tb-ink: #a6a6a6; --tb-line: rgba(0, 0, 0, 0.55);
46      }
47      html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }
48      #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }

Open full file

Download project1 MB