51
Name lower third
Speaker/guest name and role over A-roll; a tasteful line, pill or accent bar that slides in and settles. AI context: the guest is an AI researcher; the name is a placeholder, e.g. "Your Name · Research Scientist, Agents"
Add the "Name lower third" video component (Pill, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/name-lower-third.zip?v=88244c106ae4 and unzip it into components/name-lower-third/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/name-lower-third && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o name-lower-third.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":"Minimal line"},{"value":"1","label":"Pill"},{"value":"2","label":"Accent bar"}]},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 <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 <style>13 * { margin: 0; padding: 0; box-sizing: border-box; }14 /* transparent page: with CONFIG.aroll = null the render is a clean alpha overlay */15 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }16 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif;17 -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }1819 .aroll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }2021 /* ---------- overlay layer + theme tokens (theme = the label's material; the anatomy never changes) ---------- */22 #ov { position: absolute; inset: 0; }23 #ov[data-theme="light"] {24 --ink: #0A0A0A; --ink-2: #474747;25 --rule: rgba(10, 10, 10, 0.80); /* v0's line at rest */26 --lead: rgba(255, 255, 255, 0.94); /* a leading line drawn over the bare footage */27 --type-shadow: none;28 /* frosted light glass: translucent, so the room's light and colour come through the frost */29 --pane: rgba(250, 249, 247, 0.66);30 --pane-filter: blur(18px) saturate(1.5) brightness(1.08);31 --pane-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);32 --pane-ring: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06), inset 0 0.5px 0 rgba(255, 255, 255, 0.92);33 --pane-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.12), 0 5px 16px -7px rgba(0, 0, 0, 0.30);34 --pill: var(--pane); --pill-filter: var(--pane-filter); --pill-sheen: var(--pane-sheen);35 --pill-ring: var(--pane-ring); --pill-shadow: var(--pane-shadow);36 --disc: #FFFFFF; --disc-fg: #0A0A0A;37 --disc-ring: inset 0 0 0 0.5px rgba(0, 0, 0, 0.07);38 --disc-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.16), 0 2px 6px -2px rgba(0, 0, 0, 0.16);39 }40 #ov[data-theme="dark"] {41 --ink: #FAFAFA; --ink-2: #BEBEBE;42 --rule: rgba(255, 255, 255, 0.88);43 --lead: rgba(255, 255, 255, 0.88);44 --type-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 2px 14px rgba(0, 0, 0, 0.38);45 /* v0 / v2: an edge-less smoke that sinks into the footage, so the type reads as set on the shot */46 --pane: rgba(12, 12, 14, 0.40);47 --pane-filter: blur(12px) saturate(1);48 --pane-sheen: none; --pane-ring: none; --pane-shadow: none;