22
Sub-agent fan-out
The coordinator agent's live task list: parallel sub-agents appear as rows, each streams its status and ticks done, then a merged summary lands (a real product surface, not a node diagram)
Add the "Sub-agent fan-out" video component (Codex, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/subagent-fanout.zip?v=84d3f38d279b and unzip it into components/subagent-fanout/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/subagent-fanout && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o subagent-fanout.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"},{"value":"2","label":"Grok Bot"}]},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 <link rel="stylesheet" href="assets/skins/grok/skin.css" />13 <link rel="stylesheet" href="assets/skins/device/skin.css" />14 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>15 <script src="assets/kit/motion/motion.js"></script>16 <script src="assets/skins/claude-code/icons.js"></script>17 <script src="assets/skins/codex/icons.js"></script>18 <script src="assets/skins/grok/icons.js"></script>19 <script src="assets/skins/device/icons.js"></script>20 <style>21 * { margin: 0; padding: 0; box-sizing: border-box; }22 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }23 body[data-theme="dark"] { background: #0e0e0f; }24 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }2526 /* ---------- stage (DESIGN.md tokens, flat) ---------- */27 #stage { position: absolute; inset: 0; background: #f5f5f4; }28 #stage[data-theme="dark"] { background: #0e0e0f; }29 #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }30 #cam { position: relative; display: block; }31 #zoom { display: block; }3233 /* ---------- the one object: a floating product window ---------- */34 .fx-win { position: relative; overflow: hidden; opacity: 0; }35 /* light from above: sharp contact shadow + large soft diffuse one (native px, zoomed with the window) */36 .fx-win.is-light { box-shadow: 0 0 0 1px rgba(0,0,0,.075), 0 1px 2px rgba(0,0,0,.06), 0 6px 14px -6px rgba(0,0,0,.10), 0 34px 64px -24px rgba(0,0,0,.22) !important; }37 .fx-win.is-dark { box-shadow: 0 0 0 1px rgba(255,255,255,.085), 0 2px 5px rgba(0,0,0,.5), 0 34px 72px -22px rgba(0,0,0,.9) !important; }3839 /* ---------- shared live-row parts ---------- */40 .fx-hide { opacity: 0; }41 .w { display: none; } /* streamed words (prose) */42 .fx-ch { display: none; } /* typed characters */43 .fx-typed { white-space: pre; }44 .fx-caret-h { opacity: 0; }45 /* status line: a clip window whose width steps word by word (token streaming) */46 .fx-st { position: relative; display: inline-block; width: 0; overflow: hidden; flex: none; vertical-align: top; }47 .fx-ln { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }48 .fx-meta { display: inline-flex; align-items: center; width: 0; overflow: hidden; flex: none; }