62
Split screen
Two clips side by side with a divider and labels: ChatGPT vs Claude running the same demo; then vs now
Add the "Split screen" video component (70/30, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/split-screen.zip?v=7722cd358304 and unzip it into components/split-screen/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/split-screen && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o split-screen.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":"50/50"},{"value":"1","label":"70/30"},{"value":"2","label":"Then/Now"}]},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>Split screen</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/codex/skin.css" />14 <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />15 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>16 <script src="assets/kit/motion/motion.js"></script>17 <script src="assets/skins/chatgpt/icons.js"></script>18 <script src="assets/skins/claude/icons.js"></script>19 <script src="assets/skins/codex/icons.js"></script>20 <script src="assets/skins/claude-code/icons.js"></script>21 <style>22 * { margin: 0; padding: 0; box-sizing: border-box; }23 /* DESIGN.md stage tokens */24 :root {25 --stage: #f5f5f4; --surface: #ffffff; --ink: #0a0a0a; --ink-2: #6b6b6b; --ink-3: #a3a3a3;26 --hair: rgba(0, 0, 0, 0.08);27 --pane-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.25);28 /* divider: a full-height rule in the gutter with a lit grab handle (light from above) */29 --rule: rgba(0, 0, 0, 0.11);30 --handle-hi: #ffffff; --handle-lo: #f1f1f0;31 --handle-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 1px 1.5px rgba(0, 0, 0, 0.10), 0 8px 18px -8px rgba(0, 0, 0, 0.28);32 --grip: rgba(0, 0, 0, 0.22);33 /* done tick on a label: ink by default, the product accent where the product has one */34 --done-bg: rgba(10, 10, 10, 0.07); --done-ink: #0a0a0a;35 --clay-bg: rgba(217, 119, 87, 0.15); --clay-ink: #c4603e;36 }37 :root[data-theme="dark"] {38 --stage: #0e0e0f; --surface: #18181a; --ink: #fafafa; --ink-2: #a1a1a1; --ink-3: #5e5e60;39 --hair: rgba(255, 255, 255, 0.10);40 --pane-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.8);41 --rule: rgba(255, 255, 255, 0.13);42 --handle-hi: #3b3b3e; --handle-lo: #2d2d30;43 --handle-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 1.5px rgba(0, 0, 0, 0.5), 0 8px 18px -8px rgba(0, 0, 0, 0.9);44 --grip: rgba(255, 255, 255, 0.30);45 --done-bg: rgba(255, 255, 255, 0.11); --done-ink: #fafafa;46 --clay-bg: rgba(217, 119, 87, 0.20); --clay-ink: #e8906f;47 }48 html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }