Voice call

Call screen with your agent: live waveform and captions of what it is doing

Prompt for your agentpaste into Claude Code or Codex

Add the "Voice call" video component (dots call, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/voice-call.zip?v=584f2cddf39a and unzip it into components/voice-call/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/voice-call && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o voice-call.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='[{"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"dots call"},{"value":"1","label":"ChatGPT Voice"},{"value":"2","label":"Gemini Live"}]},{"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]'>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=1920, height=1080">
6<link rel="stylesheet" href="assets/fonts/fonts.css">
7<link rel="stylesheet" href="assets/skins/device/skin.css">
8<link rel="stylesheet" href="assets/skins/chatgpt/skin.css">
9<link rel="stylesheet" href="assets/skins/gemini/skin.css">
10<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
11<script src="assets/kit/motion/motion.js"></script>
12<script src="assets/skins/device/icons.js"></script>
13<script src="assets/skins/chatgpt/icons.js"></script>
14<script src="assets/skins/gemini/icons.js"></script>
15<style>
16html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#F5F5F4}
17body.is-dark{background:#0E0E0F}
18#root{position:relative;width:100%;height:100%;overflow:hidden;background:#F5F5F4}
19body.is-dark #root{background:#0E0E0F}
20#scene,#fader,#stage{position:absolute;inset:0}
21.crop{position:absolute}
22 
23/* ---------- the app fills the iPhone screen (402 × 874 pt) ---------- */
24.vc-app{position:absolute;inset:0;z-index:1}
25.vc-app > .sk-chatgpt,.vc-app > .sk-gemini{position:absolute;inset:0}
26.sk-chatgpt .cg-call,.sk-chatgpt .cg-voice{width:100%;height:100%}
27 
28/* status bar: the green in-call capsule behind the time (dots call), the orange mic dot in the island */
29.vc-callpill{display:inline-block;padding:3px 8px 3px;margin-left:-2px;border-radius:11px;background:#34C759;color:#FFFFFF}
30.vc-micdot{position:absolute;top:15.5px;right:36px;width:6px;height:6px;border-radius:50%;background:#FF9F0A}
31 
32/* ---------- live captions (shared by all three variants) ---------- */
33.vc-cap{position:absolute}
34.vc-cap__u{position:absolute;left:0;right:0;top:0}
35.vc-cap__u .w{display:inline;opacity:0}
36.vc-ln{display:block;width:max-content;margin:0 auto;white-space:nowrap}
37 
38/* ---------- status labels that swap in place (the box hugs the current label) ---------- */
39.vc-lbls{position:relative;display:block;height:20px;flex:none}
40.vc-lbls > .vc-lbl{position:absolute;left:0;top:0;white-space:nowrap;line-height:20px}
41.vc-ico{position:relative;width:18px;height:18px;flex:none;display:block}
42.vc-ico > span{position:absolute;inset:0;display:block}
43.vc-ico svg{width:100%;height:100%;display:block;overflow:visible}
44 
45/* =================== 0 · dots call =================== */
46/* the official call screen's sky: pale cyan at the top, ~#5fb6df through the middle, a little deeper toward the lower right */
47.sk-chatgpt.vc-dots .cg-call{text-shadow:0 1px 2px rgba(8,60,96,.22);background:
48  radial-gradient(85% 24% at 50% 0%, rgba(210,242,252,.6), rgba(210,242,252,0) 100%),

Open full file

Download project1 MB