Model family

A lab's model lineup as one clean spec picker: tiers side by side with speed, price and intelligence; one is marked recommended

Prompt for your agentpaste into Claude Code or Codex

Add the "Model family" video component (OpenAI (Luna / Sol / Astra), light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/model-family.zip?v=4eb208211ee8 and unzip it into components/model-family/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/model-family && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o model-family.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":"Anthropic (Haiku / Sonnet / Opus)"},{"value":"1","label":"OpenAI (Luna / Sol / Astra)"},{"value":"2","label":"Google (Flash / 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    <link rel="stylesheet" href="assets/skins/device/skin.css" />
11    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
12    <script src="assets/kit/motion/motion.js"></script>
13    <script src="assets/skins/device/icons.js"></script>
14    <style>
15      /* Google Sans ships with the Gemini skin (OFL, local file): used only by the Gemini variant */
16      @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: block; src: url('assets/skins/gemini/fonts/GoogleSans-latin.woff2') format('woff2'); }
17 
18      * { margin: 0; padding: 0; box-sizing: border-box; }
19      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
20      html[data-theme="dark"], html[data-theme="dark"] body { background: #0e0e0f; }
21 
22      /* ---------- DESIGN.md stage tokens ---------- */
23      :root {
24        --stage: #f5f5f4; --ink: #0a0a0a; --ink-2: #6b6b6b; --ink-3: #a3a3a3;
25        --hair: rgba(0, 0, 0, 0.08);
26        --card-top: #ffffff; --card-bot: #fcfcfc;
27        --card-shadow: 0 0 0 0.5px rgba(0,0,0,.07), 0 0.5px 1px rgba(0,0,0,.06), 0 12px 30px -10px rgba(0,0,0,.2);
28        --card-hi: inset 0 0 0 0 transparent;
29        --hover: rgba(0, 0, 0, 0.025);
30        --ui-font: 'Inter', sans-serif;
31        --num-font: 'JetBrains Mono', monospace;
32        --card-r: 20px; --tile-r: 12px;
33      }
34      html[data-theme="dark"] {
35        --stage: #0e0e0f; --ink: #fafafa; --ink-2: #a1a1a1; --ink-3: #5e5e60;
36        --hair: rgba(255, 255, 255, 0.09);
37        --card-top: #1b1b1d; --card-bot: #171719;
38        --card-shadow: 0 0 0 0.5px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5), 0 12px 30px -10px rgba(0,0,0,.8);
39        --card-hi: inset 0 0.5px 0 rgba(255,255,255,.06);
40        --hover: rgba(255, 255, 255, 0.03);
41      }
42 
43      #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: var(--ui-font); color: var(--ink); }
44      #stage { position: absolute; inset: 0; background: var(--stage); }
45      #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
46      #zoom { zoom: 2; display: block; }
47 
48      /* ---------- the one object: a model spec card (native UI px, presented at 2x) ---------- */

Open full file

Download project1 MB