34
Version timeline
Model versions on a dated line, each with its key number
Add the "Version timeline" video component (GPT, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/version-timeline.zip?v=3a782f2aacda and unzip it into components/version-timeline/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/version-timeline && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o version-timeline.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":"Claude"},{"value":"1","label":"GPT"},{"value":"2","label":"Gemini"}]},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 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }1718 /* ---------- stage tokens (DESIGN.md) ---------- */19 #stage {20 position: absolute; inset: 0;21 --stage: #f5f5f4; --surface: #ffffff; --ink: #0a0a0a; --ink2: #6b6b6b; --ink3: #a3a3a3;22 --hair: rgba(0, 0, 0, 0.08); /* the line ahead of the playhead */23 --edge: rgba(0, 0, 0, 0.10); /* the metric chip's outline */24 --stem: rgba(0, 0, 0, 0.12); /* label stems */25 --tick: rgba(0, 0, 0, 0.20); /* month ticks */26 --fill: rgba(0, 0, 0, 0.30); /* the line behind the playhead */27 --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.012) 100%);28 --card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 22px -12px rgba(0, 0, 0, 0.12), 0 48px 96px -40px rgba(0, 0, 0, 0.26);29 background: var(--stage);30 }31 #stage.is-dark {32 --stage: #0e0e0f; --surface: #18181a; --ink: #fafafa; --ink2: #a1a1a1; --ink3: #5e5e60;33 --hair: rgba(255, 255, 255, 0.10);34 --edge: rgba(255, 255, 255, 0.12);35 --stem: rgba(255, 255, 255, 0.14);36 --tick: rgba(255, 255, 255, 0.24);37 --fill: rgba(255, 255, 255, 0.38);38 --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(0, 0, 0, 0.05) 100%);39 --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2px 6px rgba(0, 0, 0, 0.45), 0 48px 100px -36px rgba(0, 0, 0, 0.85);40 }4142 #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }43 #cam { position: relative; display: block; }44 #card-wrap { position: relative; display: block; opacity: 0; }4546 /* ---------- the one object: a release-history card ---------- */47 #card {48 position: relative; width: 1200px; padding: 52px 64px 46px;