17
Build timer
The output builds up in stages while an elapsed timer runs, ending on a quiet '1 prompt · 16 min' stamp
Add the "Build timer" video component (Hours, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/build-timer.zip?v=f8b5bf2ead9b and unzip it into components/build-timer/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/build-timer && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o build-timer.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.
Open full file1<!doctype html>2<html lang="en" data-composition-variables='[3 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Minutes"},{"value":"1","label":"Hours"},{"value":"2","label":"Overnight"}]},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/codex/skin.css" />11 <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />12 <link rel="stylesheet" href="assets/skins/cursor/skin.css" />13 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14 <script src="assets/kit/motion/motion.js"></script>15 <script src="assets/skins/codex/icons.js"></script>16 <script src="assets/skins/claude-code/icons.js"></script>17 <script src="assets/skins/cursor/icons.js"></script>18 <style>19 * { margin: 0; padding: 0; box-sizing: border-box; }20 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }21 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }2223 /* ---------- library stage tokens (DESIGN.md) ---------- */24 #stage { position: absolute; inset: 0; background: var(--stage); }25 #stage[data-theme="light"] {26 --stage: #F5F5F4; --surface: #FFFFFF; --ink: #0A0A0A; --ink-2: #6B6B6B; --ink-3: #A3A3A3;27 --hair: rgba(0, 0, 0, 0.08);28 --ring: rgba(0, 0, 0, 0.11);29 --lift: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 60px -20px rgba(0, 0, 0, .25);30 --pill-lift: 0 1px 2px rgba(0, 0, 0, .05);31 }32 #stage[data-theme="dark"] {33 --stage: #0E0E0F; --surface: #18181A; --ink: #FAFAFA; --ink-2: #A1A1A1; --ink-3: #5E5E60;34 --hair: rgba(255, 255, 255, 0.10);35 --ring: rgba(255, 255, 255, 0.10);36 --lift: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px -20px rgba(0, 0, 0, .8);37 --pill-lift: 0 1px 2px rgba(0, 0, 0, .4);38 }3940 /* no camera move: the window stays on whole pixels so every hairline is crisp */41 #cam { position: absolute; inset: 0; }42 #group { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 26px; }43 /* the window is fixed at its final size from the first frame; the ring + lift are drawn at frame scale */44 #hero { position: relative; flex: none; box-shadow: 0 0 0 1px var(--ring), var(--lift); }4546 /* ---------- the stamp: "1 prompt · 16 min", lands once, after the run ---------- */47 #pill {48 flex: none; display: flex; align-items: center;