40
Output face-off
Two results side by side under their wordmarks; the winner ticks, the loser dims
Add the "Output face-off" video component (Websites, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/output-faceoff.zip?v=b6cf04567176 and unzip it into components/output-faceoff/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/output-faceoff && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o output-faceoff.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":"Websites"},{"value":"1","label":"3D games"},{"value":"2","label":"Images"}]},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="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>13 <script src="assets/kit/motion/motion.js"></script>14 <script src="assets/skins/device/icons.js"></script>15 <script src="assets/skins/codex/icons.js"></script>16 <style>17 * { margin: 0; padding: 0; box-sizing: border-box; }18 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }19 body.is-dark { background: #0E0E0F; }2021 /* ---------- stage tokens (DESIGN.md) ---------- */22 #root {23 position: relative; width: 100%; height: 100%; overflow: hidden;24 font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;25 --stage: #F5F5F4; --surface: #FFFFFF; --ink: #0A0A0A; --ink2: #6B6B6B; --ink3: #A3A3A3;26 --hair: rgba(0,0,0,0.08);27 --tick-bg: #0A0A0A; --tick-ink: #FFFFFF;28 --ph: #EAEAE8; --ph-hi: rgba(255,255,255,.75);29 --veil: rgba(245,245,244,.52); --veil-img: rgba(245,245,244,.24);30 color: var(--ink); background: var(--stage);31 }32 #root.is-dark {33 --stage: #0E0E0F; --surface: #18181A; --ink: #FAFAFA; --ink2: #A1A1A1; --ink3: #5E5E60;34 --hair: rgba(255,255,255,0.10);35 --tick-bg: #FAFAFA; --tick-ink: #0A0A0A;36 --ph: #1B1B1D; --ph-hi: rgba(255,255,255,.06);37 --veil: rgba(14,14,15,.50); --veil-img: rgba(14,14,15,.28);38 }39 #stage, #scene { position: absolute; inset: 0; }4041 /* ---------- the shared prompt: a neutral composer that types, then sends ---------- */42 .prompt-row { position: absolute; left: 0; right: 0; height: 64px; display: flex; justify-content: center; }43 .prompt {44 height: 64px; display: flex; align-items: center; gap: 22px; padding: 0 12px 0 30px; border-radius: 32px;45 background: var(--surface);46 box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.16);47 }48 .is-dark .prompt { box-shadow: 0 0 0 1px var(--hair), 0 12px 32px -16px rgba(0,0,0,.7); }