02
Composer bar
Only the input box floating on the stage: prompt types, attachment chips drop in, send pulses
Add the "Composer bar" video component (ChatGPT, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/composer-bar.zip?v=7f8ca6c846ad and unzip it into components/composer-bar/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/composer-bar && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o composer-bar.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":"ChatGPT"},{"value":"1","label":"Claude"},{"value":"2","label":"Grok"}]},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/chatgpt/skin.css" />11 <link rel="stylesheet" href="assets/skins/claude/skin.css" />12 <link rel="stylesheet" href="assets/skins/grok/skin.css" />13 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14 <script src="assets/skins/chatgpt/icons.js"></script>15 <script src="assets/skins/claude/icons.js"></script>16 <script src="assets/skins/grok/icons.js"></script>17 <script src="assets/kit/motion/motion.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.is-dark { background: #0e0e0f; }22 #root { width: 100%; height: 100%; position: relative; overflow: hidden; font-family: "Inter", sans-serif; }2324 /* DESIGN.md stage: flat, no texture */25 #stage { position: absolute; inset: 0; background: #f5f5f4; }26 #stage.is-dark { background: #0e0e0f; }27 /* the composer is docked by its bottom edge (it grows upward, like a real composer);28 padding-bottom is set at build so the empty and the full state sit evenly about the centre */29 #center { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }30 /* real product CSS px, presented at video scale (zoom per variant, from CONFIG) */31 #zoom { position: relative; }32 #obj { position: relative; }3334 /* ---------- shared pieces ---------- */35 .box { position: relative; }36 /* the attachment row: a slot that opens upward; the files sit on its bottom edge */37 .att-wrap { height: 0; flex: none; position: relative; overflow: visible; }38 .att-row { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-start; flex-wrap: nowrap; }39 .att { position: relative; flex: none; }40 .typed { display: inline-block; white-space: pre; position: relative; }41 .typed .caret {42 display: inline-block; width: 1.5px; height: 1.12em; margin-left: 1px; vertical-align: -0.18em;43 background: var(--caret); border-radius: 1px; opacity: 0;44 }45 .send-wrap { position: relative; display: inline-flex; flex: none; }46 /* send pulse: one filled halo in the button's own colour */47 .send-wrap > .pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: var(--pulse); }48 .send-wrap > :last-child { position: relative; z-index: 1; }