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 (Grok Bot in Slack, 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":"1","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