60
Face PiP
Rounded presenter inset that keeps the face on screen while a full-frame AI graphic (a ChatGPT screen) plays
Add the "Face PiP" video component (Corner rounded, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/face-pip.zip?v=9eaba87e088c and unzip it into components/face-pip/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/face-pip && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o face-pip.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":"Corner circle (ChatGPT)"},{"value":"1","label":"Corner rounded (Claude)"},{"value":"2","label":"Side strip (Codex)"}]},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 <link rel="stylesheet" href="assets/fonts/fonts.css" />10 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />11 <link rel="stylesheet" href="assets/skins/claude/skin.css" />12 <link rel="stylesheet" href="assets/skins/codex/skin.css" />13 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14 <script src="assets/kit/motion/motion.js"></script>15 <script src="assets/skins/chatgpt/icons.js"></script>16 <script src="assets/skins/claude/icons.js"></script>17 <script src="assets/skins/codex/icons.js"></script>18 <style>19 * { margin: 0; padding: 0; box-sizing: border-box; }20 /* transparent page: with CONFIG.aroll = null the component exports as an alpha WebM */21 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }22 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }2324 /* ---- the full-frame graphic: flat library stage + one product window ---- */25 #graphic { position: absolute; inset: 0; }26 #stage { position: absolute; inset: 0; background: var(--stage); }27 #place { position: absolute; transform-origin: 50% 50%; }28 #zoomer { position: relative; transform-origin: 0 0; }2930 /* ---- the presenter inset: one box that is the full A-roll at rest and the PiP at the payoff ---- */31 #pip { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; z-index: 5; background: transparent; }32 #pip-media { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }33 .pip-clip { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: none; }34 .pip-clip.is-on { display: block; }35 .pip-clip video { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; display: block; }36 /* inner edge of the inset: a hairline plus a soft top highlight (light from above) */37 #pip-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;38 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 0.20); }3940 :root { --stage: #f5f5f4; }41 :root[data-theme="dark"] { --stage: #0e0e0f; }4243 .abs { position: absolute; }44 .km-caret { --km-caret-w: 1.5px; }45 /* Claude: the tail spark and the action row share one slot under the reply */46 .tail-wrap { position: relative; height: 36px; }47 .tail-wrap > * { position: absolute; left: 0; top: 0; }48 .tail-wrap > .cl-tail-spark { top: 14px; margin: 0; }