Agent chat thread

You text your agent in a messaging app; typing dots; it replies with a done card

Prompt for your agentpaste into Claude Code or Codex

Add the "Agent chat thread" video component (Muse in WhatsApp, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/agent-chat-thread.zip?v=68fc49fdd995 and unzip it into components/agent-chat-thread/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/agent-chat-thread && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o agent-chat-thread.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":"dots in iMessage"},{"value":"1","label":"Grok Bot in Slack"},{"value":"2","label":"Muse in WhatsApp"}]},
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>Agent chat thread</title>
10    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
11    <link rel="stylesheet" href="assets/fonts/fonts.css" />
12    <link rel="stylesheet" href="assets/skins/device/skin.css" />
13    <link rel="stylesheet" href="assets/skins/messaging/skin.css" />
14    <script src="assets/skins/messaging/icons.js"></script>
15    <script src="assets/kit/motion/motion.js"></script>
16    <style>
17      :root { --stage: #f5f5f4; }
18      html[data-theme="dark"] { --stage: #0e0e0f; }
19      * { margin: 0; padding: 0; box-sizing: border-box; }
20      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }
21      #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", system-ui, sans-serif; }
22 
23      /* ---------- presentation ---------- */
24      .scene { position: absolute; inset: 0; display: none; }
25      .enter, .push { position: absolute; inset: 0; display: flex; justify-content: center; }
26      /* Phone: launch-video crop at zoom 1.75 (phone 753 px wide, 17 pt text at ~30 px). The rim sits
27         28 px under the top edge and the frame edge lands exactly in the gap between the QuickType bar
28         and the first key row: island, header, thread, composer and live predictions all read. */
29      .scene.phone .push { align-items: flex-start; padding-top: 28px; }
30      .phone-zoom { zoom: 1.75; }
31      /* Desktop: a 730 pt Slack window at 1.72x (1256 px wide, 15 px Lato at ~26 px). Its height is
32         fitted at build time so the last frame has today's date divider fully clear of the tabs. */
33      .scene.win .push { align-items: center; }
34      .win-zoom { zoom: 1.72; }
35      .sk-slack.dm-size { --sl-w: 730px; --sl-h: 576px; --sl-side-w: 214px; }
36      .rv { display: flex; flex-direction: column; flex: none; position: relative; }
37      .imsg-thread > .rv, .wa-thread > .rv { justify-content: flex-end; }
38      /* content under the floating glass header is gone before it reaches the name capsule */
39      .sk-imsg .imsg-thread { -webkit-mask-image: linear-gradient(to bottom, transparent 144px, #000 168px); mask-image: linear-gradient(to bottom, transparent 144px, #000 168px); }
40      .sk-wa .wa-thread { -webkit-mask-image: linear-gradient(to bottom, transparent 120px, #000 138px); mask-image: linear-gradient(to bottom, transparent 120px, #000 138px); }
41      /* the sent bubble lifts out of the text field: a copy rides above the composer, then hands off */
42      .imsg-fly, .wa-fly { position: absolute; left: 0; right: 0; top: 0; z-index: 9; pointer-events: none; opacity: 0; }
43      .imsg-fly .imsg-row, .wa-fly .wa-row { margin-top: 0; }
44      .wa-fly .wa-b { box-shadow: none; }
45 
46      /* ---------- iMessage: Apple Maps rich link (the done card) ---------- */
47      .imsg-link.map .imsg-link-img { height: 140px; background: none; }
48      .imsg-link.map .imsg-link-img svg { display: block; width: 270px; height: 140px; }

Open full file

Download project1 MB