Chat prompt

Prompt types into the real chat window, sends, reply streams in

Prompt for your agentpaste into Claude Code or Codex

Add the "Chat prompt" video component (Gemini, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/chat-prompt.zip?v=9039909016b0 and unzip it into components/chat-prompt/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/chat-prompt && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o chat-prompt.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.

index.htmlhtmlDownload

1<!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":"Gemini"}]},
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>Chat prompt</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/gemini/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/chatgpt/icons.js"></script>
17    <script src="assets/skins/claude/icons.js"></script>
18    <script src="assets/skins/gemini/icons.js"></script>
19    <style>
20      * { margin: 0; padding: 0; box-sizing: border-box; }
21      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
22      body.is-dark { background: #0e0e0f; }
23      #root { position: relative; width: 100%; height: 100%; overflow: hidden; }
24      /* the stage is flat (DESIGN.md tokens) */
25      #stage { position: absolute; inset: 0; background: #f5f5f4; }
26      #stage.is-dark { background: #0e0e0f; }
27      /* one floating window, the same footprint on the frame for every product (1248 x 842) */
28      #place { position: absolute; opacity: 0; }
29      .abs { position: absolute; }
30      .km-caret { --km-caret-w: 1.5px; }
31 
32      /* the sent prompt: one copy travels from the composer into its bubble (FLIP) */
33      .fly { position: absolute; left: 0; top: 0; z-index: 60; white-space: nowrap; transform-origin: 0 0; pointer-events: none; opacity: 0; }
34 
35      /* ---------- ChatGPT (chatgpt.com in Chrome) ---------- */
36      #win.sk-chatgpt .cg-c-input { overflow: visible; }
37      /* official GPT-6 web proportions: an airy reading column and a slim pill narrower than it */
38      #win.sk-chatgpt .cg-composer--pill { width: var(--gx-pill-w); }
39      #win.sk-chatgpt .cg-user { max-width: 84%; }
40      #win.sk-chatgpt .cg-ai h1 { letter-spacing: -0.01em; }
41      /* dark: the Chrome profile's blue colour theme stays blue in dark (navy-tinted frame) */
42      #win.sk-chatgpt.cg-browser[data-theme="dark"] {
43        --cb-frame: #1b2230; --cb-bar: #252c3a; --cb-omni: #1b2230; --cb-chip: #33445f;
44        --cb-rule: #2c3340; --cb-tsearch: rgba(255, 255, 255, 0.07); --cb-sep: rgba(255, 255, 255, 0.14);
45      }
46 
47      /* ---------- Claude (desktop app, sidebar collapsed) ---------- */
48      #win .cl-window { border-radius: 14px; }

Open full file

Download project1 MB