Handoff chain

A task passing between real surfaces: you ask your personal agent, it opens the job in the coding agent, and the result comes back to you (the actual chat, task and notification surfaces, not boxes and arrows)

Prompt for your agentpaste into Claude Code or Codex

Add the "Handoff chain" video component (Gmail to Muse to Calendar, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/handoff-chain.zip?v=52643667bb8c and unzip it into components/handoff-chain/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/handoff-chain && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o handoff-chain.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":"Voice to dots to Codex"},{"value":"1","label":"Slack to Grok Bot to Cursor"},{"value":"2","label":"Gmail to Muse to Calendar"}]},
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>Handoff chain</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/chatgpt/skin.css" />
13    <link rel="stylesheet" href="assets/skins/codex/skin.css" />
14    <link rel="stylesheet" href="assets/skins/cursor/skin.css" />
15    <link rel="stylesheet" href="assets/skins/messaging/skin.css" />
16    <link rel="stylesheet" href="assets/skins/device/skin.css" />
17    <script src="assets/skins/chatgpt/icons.js"></script>
18    <script src="assets/skins/codex/icons.js"></script>
19    <script src="assets/skins/cursor/icons.js"></script>
20    <script src="assets/skins/messaging/icons.js"></script>
21    <script src="assets/skins/device/icons.js"></script>
22    <script src="assets/kit/motion/motion.js"></script>
23    <style>
24      /* ---------- stage tokens (DESIGN.md) ---------- */
25      :root { --stage: #f5f5f4; }
26      html[data-theme="dark"] { --stage: #0e0e0f; }
27      * { margin: 0; padding: 0; box-sizing: border-box; }
28      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }
29      #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", sans-serif; }
30      #stage { position: absolute; inset: 0; }
31      .surf { position: absolute; left: 0; top: 0; }
32      .grow { flex: none; }
33      .ic { display: inline-flex; flex: none; }
34      .ic svg { width: 100%; height: 100%; display: block; }
35 
36      /* ==================================================================
37         iPhone screens (V0 dots, V2 Muse). Body + status bar + keyboard come
38         from the messaging skin; the app UI inside is built here.
39         ================================================================== */
40      .hc-app { isolation: isolate; }
41      .hc-thread { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; z-index: 1; }
42      .hc-thread .pad { position: relative; display: flex; flex-direction: column; padding-bottom: 8px; }
43      .hc-stamp { text-align: center; font-size: 14px; line-height: 18px; padding: 8px 0 12px; letter-spacing: -0.01em; }
44      .hc-stamp b { font-weight: 600; }
45      .hc-slot-typing { position: absolute; left: 0; bottom: 8px; }
46      /* touch indicator ("show touches"), the way app demo recordings mark a tap */
47      .hc-touch { position: absolute; z-index: 70; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
48        background: rgba(60, 60, 67, 0.2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.12); }

Open full file

Download project1 MB