Model lockup

Lab mark, model name, version number ticks into place

Prompt for your agentpaste into Claude Code or Codex

Add the "Model lockup" video component (OpenAI GPT-6 Astra, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/model-lockup.zip?v=35b9c800e0df and unzip it into components/model-lockup/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/model-lockup && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o model-lockup.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":"OpenAI GPT-6 Astra"},{"value":"1","label":"Anthropic Claude Opus 5.5"},{"value":"2","label":"Google Gemini 4 Argon"}]},
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    <script src="assets/skins/chatgpt/icons.js"></script>
13    <script src="assets/skins/claude/icons.js"></script>
14    <script src="assets/skins/gemini/icons.js"></script>
15    <style>
16      /* Google Sans ships with the gemini skin (OFL, local file, no network). Only the Gemini lockup uses it. */
17      @font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: block;
18        src: url("assets/skins/gemini/fonts/GoogleSans-latin.woff2") format("woff2"); }
19 
20      * { margin: 0; padding: 0; box-sizing: border-box; }
21      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
22      body.is-dark { background: #0e0e0f; }
23 
24      /* ---------- stage tokens (DESIGN.md) ---------- */
25      #root {
26        --stage: #f5f5f4;
27        --ink: #0a0a0a;
28        --ink-2: #6b6b6b;
29        width: 100%; height: 100%; position: relative; overflow: hidden;
30        font-family: "Inter", sans-serif;
31        -webkit-font-smoothing: antialiased;
32        text-rendering: optimizeLegibility;
33      }
34      #root.is-dark { --stage: #0e0e0f; --ink: #fafafa; --ink-2: #a1a1a1; }
35 
36      #stage { position: absolute; inset: 0; background: var(--stage); }
37      #cam { position: absolute; inset: 0; }
38 
39      /* ---------- the lockup: mark + model name; lab · date under the name ---------- */
40      #lockup { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; }
41      #mark { flex: none; position: relative; color: var(--ink); }
42      #mark.is-claude { color: #d97757; }
43      #markSpin, #markInner { position: absolute; inset: 0; }
44      #markInner svg { width: 100%; height: 100%; display: block; overflow: visible; }
45 
46      #text { display: flex; flex-direction: column; align-items: flex-start; }
47      #name { position: relative; display: flex; align-items: flex-start; color: var(--ink); }
48      #name > span { display: block; flex: none; white-space: pre; }

Open full file

Download project1 MB