04
Terminal run
Agent CLI: task typed, Read/Edit/Bash tool calls tick by, diff summary, done line
Add the "Terminal run" video component (Claude Code, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/terminal-run.zip?v=dae6e8b419d1 and unzip it into components/terminal-run/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/terminal-run && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o terminal-run.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":"Claude Code"},{"value":"1","label":"Codex CLI"},{"value":"2","label":"Gemini CLI"}]},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/claude-code/skin.css" />11 <link rel="stylesheet" href="assets/skins/codex/skin.css" />12 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>13 <script src="assets/kit/motion/motion.js"></script>14 <script src="assets/skins/claude-code/icons.js"></script>15 <style>16 * { margin: 0; padding: 0; box-sizing: border-box; }17 html { --stage: #f5f5f4; }18 html[data-theme="dark"] { --stage: #0e0e0f; }19 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }20 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }21 #stage { position: absolute; inset: 0; background: var(--stage); }22 #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }23 #lift { position: relative; display: block; transform-origin: 50% 55%; }2425 /* ============ the terminal window (shared by all three CLIs) ============26 Drawn at native macOS size: 640 x 515 pt, 13 px monospace = an 80-column terminal.27 Presented at 1.85x with CSS zoom: 1184 x 953 px on the frame (62% of the width), mono at 24 px. */28 #win {29 zoom: 1.85; position: relative; width: 640px; height: 515px; border-radius: 10px; overflow: hidden;30 display: flex; flex-direction: column; background: var(--tbg);31 box-shadow: 0 0 0 .5px rgba(0,0,0,.16), 0 .5px 1px rgba(0,0,0,.10), 0 2px 5px -1px rgba(0,0,0,.07),32 0 22px 44px -14px rgba(0,0,0,.22);33 }34 html[data-theme="dark"] #win {35 box-shadow: 0 0 0 .5px rgba(255,255,255,.13), 0 1px 2px rgba(0,0,0,.5), 0 3px 8px -2px rgba(0,0,0,.45),36 0 26px 50px -12px rgba(0,0,0,.75);37 }38 .tbar {39 flex: none; position: relative; height: 28px; display: flex; align-items: center; padding-left: 13px;40 background: var(--tbg); border-bottom: .5px solid var(--tline);41 font: 600 13px/1 'Inter', sans-serif; letter-spacing: -0.01em; color: var(--tfg);42 }43 html[data-theme="dark"] .tbar { box-shadow: inset 0 .5px 0 rgba(255,255,255,.07); }44 .lights { display: inline-flex; gap: 8px; align-items: center; }45 .lights i { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }46 .lights i:nth-child(1) { background: #ff5f57; }47 .lights i:nth-child(2) { background: #febc2e; }48 .lights i:nth-child(3) { background: #28c840; }