05
Coding app
Desktop agent app: thread list, active task streaming, status chips go running to done
Add the "Coding app" video component (Codex app, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/coding-app.zip?v=b13cdfd4ab82 and unzip it into components/coding-app/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/coding-app && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o coding-app.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":"Codex app"},{"value":"1","label":"Projects in Claude Code"},{"value":"2","label":"Cursor"}]},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/codex/skin.css" />11 <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />12 <link rel="stylesheet" href="assets/skins/cursor/skin.css" />13 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14 <script src="assets/kit/motion/motion.js"></script>15 <script src="assets/skins/codex/icons.js"></script>16 <script src="assets/skins/claude-code/icons.js"></script>17 <script src="assets/skins/cursor/icons.js"></script>18 <style>19 * { margin: 0; padding: 0; box-sizing: border-box; }20 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }21 body[data-theme="dark"] { background: #0e0e0f; }22 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }2324 /* ---------- stage: flat DESIGN.md tokens ---------- */25 #stage { position: absolute; inset: 0; background: #f5f5f4; }26 #stage[data-theme="dark"] { background: #0e0e0f; }27 #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }28 #cam, #lift { position: relative; display: block; }29 #lift { opacity: 0; }30 #zoom { display: block; position: relative; }3132 /* ---------- the one object: a desktop app window, light from above ---------- */33 .fx-win { position: relative; overflow: hidden; }34 .fx-win.is-light { box-shadow: 0 0 0 0.5px rgba(0,0,0,.17), 0 0.5px 1px rgba(0,0,0,.07), 0 4px 10px -4px rgba(0,0,0,.07), 0 22px 46px -16px rgba(0,0,0,.24) !important; }35 .fx-win.is-dark { box-shadow: 0 0 0 0.5px rgba(255,255,255,.13), 0 0 0 1px rgba(0,0,0,.6), 0 4px 10px -4px rgba(0,0,0,.5), 0 24px 52px -14px rgba(0,0,0,.9) !important; }3637 /* ---------- macOS pointer (hotspot at the box origin) ---------- */38 .fx-ptr { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; pointer-events: none; }39 .fx-ptr > svg { position: absolute; left: -3px; top: -2.4px; width: 22px; height: 30px; overflow: visible; filter: drop-shadow(0 1px 1.4px rgba(0,0,0,.32)); }4041 /* ---------- shared live parts ---------- */42 .fx-shim {43 background-image: linear-gradient(90deg, var(--sa) 0%, var(--sa) 38%, var(--sb) 50%, var(--sa) 62%, var(--sa) 100%);44 background-size: 300% 100%; background-position: var(--sx, 100%) 0;45 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;46 }47 .fx-grow { overflow: hidden; }48 .fx-stack { display: grid; }