03
Model picker
Model/effort dropdown opens, cursor picks, it locks in
Add the "Model picker" video component (Codex effort (low to xhigh), light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/model-picker.zip?v=0bbee242a5ee and unzip it into components/model-picker/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/model-picker && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o model-picker.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":"ChatGPT (GPT-6 Astra / Sol / Luna)"},{"value":"1","label":"Claude (Opus / Sonnet / Haiku 5.5)"},{"value":"2","label":"Codex effort (low to xhigh)"}]},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/chatgpt/skin.css" />11 <link rel="stylesheet" href="assets/skins/claude/skin.css" />12 <link rel="stylesheet" href="assets/skins/codex/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/chatgpt/icons.js"></script>16 <script src="assets/skins/claude/icons.js"></script>17 <script src="assets/skins/codex/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 { width: 100%; height: 100%; position: relative; overflow: hidden; }22 /* The frame is the product's own canvas (windowless, like the official zoomed renders). */23 #stage { position: absolute; inset: 0; background: var(--canvas, #f5f5f4); overflow: hidden; }24 /* #cam carries the one slow push-in (frame px); #zoomer presents real-app CSS px at CONFIG zoom. */25 #cam { position: absolute; inset: 0; }26 #zoomer { position: absolute; left: 0; top: 0; }27 .scene { position: absolute; inset: 0; display: none; }28 .scene.is-on { display: block; }29 .home { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }3031 /* ---------- pointer: an element whose own (0,0) is the hotspot ---------- */32 .ptr { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 100; pointer-events: none; }33 .ptr > span { position: absolute; display: block; }34 .ptr > span svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.28)); }35 .ptr .p-hand { display: none; }36 .ptr.is-hand .p-hand { display: block; }37 .ptr.is-hand .p-arrow { display: none; }38 /* macOS arrow (ChatGPT / Codex): 22x30 box, hotspot (3, 2.4) */39 .ptr.is-mac .p-arrow { left: -3px; top: -2.4px; width: 22px; height: 30px; }40 /* Anthropic renders: white arrow 27x40 (tip 2.13, 2.14) and white hand 40x49 (fingertip 17.8, 1.18) */41 .ptr.is-claude { color: #ffffff; }42 .ptr.is-claude .p-arrow { left: -2.13px; top: -2.14px; width: 27px; height: 40px; }43 .ptr.is-claude .p-hand { left: -17.8px; top: -1.18px; width: 40px; height: 49px; }4445 /* menus are direct children of the scene, placed from measurements at build time */46 .menu-abs { position: absolute; z-index: 40; }47 .hl { position: absolute; pointer-events: none; opacity: 0; }48