Phone recording frame

A vertical phone capture of an AI app (ChatGPT voice, Grok, Gemini Live) centred in a bezel with clean sides

Prompt for your agentpaste into Claude Code or Codex

Add the "Phone recording frame" video component (Frameless, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/phone-recording-frame.zip?v=f97d1b8e638c and unzip it into components/phone-recording-frame/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/phone-recording-frame && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o phone-recording-frame.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":"iPhone"},{"value":"1","label":"Android"},{"value":"2","label":"Frameless"}]},{"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<link rel="stylesheet" href="assets/skins/grok/skin.css">
11<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
12<script src="assets/kit/motion/motion.js"></script>
13<script src="assets/skins/device/icons.js"></script>
14<script src="assets/skins/chatgpt/icons.js"></script>
15<script src="assets/skins/gemini/icons.js"></script>
16<script src="assets/skins/grok/icons.js"></script>
17<style>
18/* ---------- stage (DESIGN.md tokens) ---------- */
19html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#F5F5F4}
20body.is-dark{background:#0E0E0F}
21#root{position:relative;width:100%;height:100%;overflow:hidden;background:var(--stage);font-family:'Inter',system-ui,sans-serif;
22  --stage:#F5F5F4;--ink:#0A0A0A;--ink-2:#6B6B6B;--ink-3:#A3A3A3;--hair:rgba(0,0,0,.08)}
23body.is-dark #root{--stage:#0E0E0F;--ink:#FAFAFA;--ink-2:#A1A1A1;--ink-3:#5E5E60;--hair:rgba(255,255,255,.10)}
24#scene{position:absolute;inset:0}
25#dev{position:absolute}
26#devZoom{position:absolute;left:0;top:0;transform-origin:50% 50%}
27 
28/* the phone's shadow on the stage: a sharp contact line + a soft drop that hugs the body (light from above).
29   r02: the skin's 120px diffuse layer banded into a visible box on the flat stage, so the frame uses a tighter stack. */
30#devZoom .dv-iphone,#devZoom .an-phone{
31  box-shadow:0 0 0 .5px var(--pr-rim-edge), inset 0 0 0 .75px var(--pr-rim-inner),
32             0 1px 2px rgba(0,0,0,.16), 0 10px 22px -8px rgba(0,0,0,.20), 0 32px 52px -26px rgba(0,0,0,.30)}
33#devZoom .dv-iphone{--pr-rim-edge:var(--dv-hw-rim-edge);--pr-rim-inner:var(--dv-hw-rim-inner)}
34#devZoom .an-phone{--pr-rim-edge:var(--an-rim-edge);--pr-rim-inner:var(--an-rim-inner)}
35body.is-dark #devZoom .dv-iphone,body.is-dark #devZoom .an-phone{
36  box-shadow:0 0 0 .5px var(--pr-rim-edge), inset 0 0 0 .75px var(--pr-rim-inner),
37             0 1px 2px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8)}
38 
39/* ---------- the source line beside the phone (our graphic) ---------- */
40.pr-credit{position:absolute;display:flex;align-items:center;gap:18px;white-space:nowrap}
41.pr-credit .dv-appicon{--s:60px}
42.pr-credit__app{font:600 30px/36px 'Inter',sans-serif;letter-spacing:-.02em;color:var(--ink)}
43.pr-credit__src{font:500 24px/30px 'Inter',sans-serif;letter-spacing:-.005em;color:var(--ink-2);margin-top:2px}
44.pr-gicon{width:60px;height:60px;border-radius:14px;flex:none;display:grid;place-items:center;background:#FFFFFF;
45  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10)}
46body.is-dark .pr-gicon{background:#1F1F1F;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
47.pr-gicon .gm-ico{--gm-ico:36px}
48

Open full file

Download project8 MB