41
Spec compare
Columns of price, context, speed, best-for with ticks
Add the "Spec compare" video component (3-way, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/spec-compare.zip?v=75bd3611420b and unzip it into components/spec-compare/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/spec-compare && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o spec-compare.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":"2-way"},{"value":"1","label":"3-way"},{"value":"2","label":"With a pick column"}]},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/chatgpt/icons.js"></script>14 <script src="assets/skins/claude/icons.js"></script>15 <script src="assets/skins/gemini/icons.js"></script>16 <script src="assets/skins/codex/icons.js"></script>17 <script src="assets/skins/cursor/icons.js"></script>18 <script src="assets/skins/device/icons.js"></script>19 <style>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; }2324 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif;25 -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }2627 /* ---------- DESIGN.md stage tokens (+ a few derived ones) ---------- */28 #root[data-theme="light"] {29 --stage: #f5f5f4; --surface: #ffffff;30 --ink: #0a0a0a; --ink2: #6b6b6b; --ink3: #a3a3a3;31 --line: rgba(0, 0, 0, 0.075); --track: rgba(0, 0, 0, 0.07);32 --card-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06), 0 8px 18px -10px rgba(0,0,0,.10), 0 34px 70px -28px rgba(0,0,0,.24);33 }34 #root[data-theme="dark"] {35 --stage: #0e0e0f; --surface: #18181a;36 --ink: #fafafa; --ink2: #a1a1a1; --ink3: #5e5e60;37 --line: rgba(255, 255, 255, 0.08); --track: rgba(255, 255, 255, 0.09);38 --card-shadow: 0 0 0 1px rgba(255,255,255,.075), inset 0 1px 0 rgba(255,255,255,.035), 0 2px 5px rgba(0,0,0,.45), 0 34px 80px -24px rgba(0,0,0,.85);39 }4041 #stage { position: absolute; inset: 0; background: var(--stage); }42 #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }43 #zoom { position: relative; display: block; }4445 /* ---------- the one object: a spec-compare table card (native UI px; #zoom presents it at ~1.5x) ---------- */46 .sc-card { position: relative; border-radius: 18px; background: var(--surface); box-shadow: var(--card-shadow); opacity: 0; }47 .sc-layer { position: absolute; inset: 0; }48 .sc-hl { z-index: 1; }