59
Framed B-roll
A third-party AI clip (official launch footage, a screen recording of Claude Code) in a clean frame with a source line on the stage
Add the "Framed B-roll" video component (Device bezel, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/framed-broll.zip?v=6e0b2ce1cd4b and unzip it into components/framed-broll/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/framed-broll && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o framed-broll.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.
Open full file1<!doctype html>2<html lang="en" data-composition-variables='[3 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Rounded frame (ChatGPT)"},{"value":"1","label":"Device bezel (Claude)"},{"value":"2","label":"Full-bleed + source (Gemini)"}]},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>Framed B-roll</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/claude/skin.css" />14 <link rel="stylesheet" href="assets/skins/gemini/skin.css" />15 <link rel="stylesheet" href="assets/skins/device/skin.css" />16 <script src="assets/skins/chatgpt/icons.js"></script>17 <script src="assets/skins/claude/icons.js"></script>18 <script src="assets/skins/gemini/icons.js"></script>19 <script src="assets/skins/device/icons.js"></script>20 <script src="assets/kit/motion/motion.js"></script>21 <style>22 /* ---------- stage tokens (DESIGN.md) ---------- */23 :root {24 --stage: #f5f5f4; --surface: #ffffff; --ink: #0a0a0a; --ink-2: #6b6b6b; --ink-3: #a3a3a3;25 --hair: rgba(0, 0, 0, 0.08);26 }27 html[data-stage="dark"] {28 --stage: #0e0e0f; --surface: #18181a; --ink: #fafafa; --ink-2: #a1a1a1; --ink-3: #5e5e60;29 --hair: rgba(255, 255, 255, 0.10);30 }31 * { margin: 0; padding: 0; box-sizing: border-box; }32 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }33 #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", system-ui, sans-serif; }34 #stage { position: absolute; inset: 0; background: var(--stage); }35 #scene { position: absolute; inset: 0; }3637 /* object + its source line, centred as one block */38 .block { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }3940 /* ---------- source line (v0, v1): on the stage under the clip, aligned to its edges ---------- */41 .src { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 40px; margin-top: 34px;42 font-size: 24px; line-height: 32px; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }43 .src-l, .src-r { display: flex; align-items: center; min-width: 0; }44 .src-k { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }45 .src-rule { width: 1px; height: 22px; background: var(--hair); margin: 0 18px 0 16px; flex: none; }46 .src-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;47 background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 2px rgba(0, 0, 0, 0.06); margin-right: 12px; }48 .src-av svg { width: 21px; height: 21px; display: block; }