35
Model card
Spec card: name, context, price in/out, date, availability chips
Add the "Model card" video component (Anthropic, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/model-card.zip?v=030bff0d6b06 and unzip it into components/model-card/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/model-card && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o model-card.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":"OpenAI"},{"value":"1","label":"Anthropic"},{"value":"2","label":"Google"}]},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 <title>Model card</title>10 <link rel="stylesheet" href="assets/fonts/fonts.css" />11 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />12 <link rel="stylesheet" href="assets/skins/claude/skin.css" />13 <link rel="stylesheet" href="assets/skins/gemini/skin.css" />14 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>15 <script src="assets/kit/motion/motion.js"></script>16 <script src="assets/skins/chatgpt/icons.js"></script>17 <script src="assets/skins/claude/icons.js"></script>18 <script src="assets/skins/gemini/icons.js"></script>19 <style>20 /* Local declarations of the families used below (same shipped files the linked CSS loads),21 so the static font guard can see them. */22 @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: block; src: url('assets/fonts/Inter-normal.woff2') format('woff2'); }23 @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: block; src: url('assets/fonts/JetBrainsMono-normal.woff2') format('woff2'); }24 @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: block; src: url('assets/fonts/SourceSerif4-normal.woff2') format('woff2'); }25 @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'); }26 @font-face { font-family: 'Google Sans Code'; font-style: normal; font-weight: 300 800; font-display: block; src: url('assets/skins/gemini/fonts/GoogleSansCode-latin.woff2') format('woff2'); }2728 * { margin: 0; padding: 0; box-sizing: border-box; }29 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }30 body.is-dark { background: #0e0e0f; }3132 /* ---------- stage (DESIGN.md) ---------- */33 #root {34 --stage: #f5f5f4;35 width: 100%; height: 100%; position: relative; overflow: hidden;36 -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;37 }38 #root.is-dark { --stage: #0e0e0f; }39 #stage { position: absolute; inset: 0; background: var(--stage); }40 #cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }41 #zoom { zoom: 1.9; }42 .scene { position: relative; width: 560px; }4344 /* ---------- per-product tokens (values from each skin's tokens / UI-NOTES) ----------45 Three type sizes in the frame: 14 (every label, value, chip, ID), 26 (name), 40 (the two prices). */46 /* OpenAI: chatgpt.com Intelligent UI card (#fff, 1px #ececec edge, radius 16, #f9f9f9 inner), OpenAI Sans → Inter */47 .v-openai {48 --font: "Inter", sans-serif; --font-title: "Inter", sans-serif; --mono: "JetBrains Mono", monospace;