Own-video card

Your past AI video as a YouTube watch-page card: "remember when I tested GPT-6…"

Prompt for your agentpaste into Claude Code or Codex

Add the "Own-video card" video component (Thumbnail card, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/own-video-card.zip?v=739f22069d4c and unzip it into components/own-video-card/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/own-video-card && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o own-video-card.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='[
3  {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Thumbnail card"},{"value":"1","label":"Channel card"},{"value":"2","label":"Playlist"}]},
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>Own-video card</title>
10    <link rel="stylesheet" href="assets/fonts/fonts.css" />
11    <link rel="stylesheet" href="assets/skins/device/skin.css" />
12    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
13    <script src="assets/kit/motion/motion.js"></script>
14    <script src="assets/skins/device/icons.js"></script>
15    <style>
16      * { margin: 0; padding: 0; box-sizing: border-box; }
17 
18      /* ---- Stage (DESIGN.md) ---- */
19      html { --stage: #F5F5F4; }
20      html.dark { --stage: #0E0E0F; }
21      html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }
22      #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); }
23      #cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
24      #place { position: relative; }
25 
26      /* ---- YouTube web tokens (extrapolated from youtube.com; see DECISIONS.md) ----
27         light = YouTube light theme, dark = YouTube dark theme. Real CSS px; each variant is presented with `zoom`. */
28      html {
29        --yt-bg: #FFFFFF; --yt-ink: #0F0F0F; --yt-ink2: #606060;
30        --yt-line: rgba(0,0,0,0.10); --yt-tint: rgba(0,0,0,0.05); --yt-tint2: rgba(0,0,0,0.10);
31        --yt-desc: rgba(0,0,0,0.05);
32        --yt-thumb-bg: #E5E5E5; --yt-sub-bg: #0F0F0F; --yt-sub-ink: #FFFFFF;
33        --yt-scroll: rgba(0,0,0,0.26);
34        --yt-red: #FF0033; --yt-progress: linear-gradient(90deg, #FF0033 80%, #FF2791 100%);
35        --yt-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 60px -20px rgba(0,0,0,.25);
36      }
37      html.dark {
38        --yt-bg: #0F0F0F; --yt-ink: #F1F1F1; --yt-ink2: #AAAAAA;
39        --yt-line: rgba(255,255,255,0.20); --yt-tint: rgba(255,255,255,0.08); --yt-tint2: rgba(255,255,255,0.14);
40        --yt-desc: rgba(255,255,255,0.10);
41        --yt-thumb-bg: #272727; --yt-sub-bg: #F1F1F1; --yt-sub-ink: #0F0F0F;
42        --yt-scroll: rgba(255,255,255,0.30);
43        --yt-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 24px 60px -20px rgba(0,0,0,.8);
44      }
45      /* a crop of the youtube.com page; radius = inner radius (12) + padding (12), so the corners are concentric */
46      .yt {
47        position: relative; background: var(--yt-bg); border-radius: 24px; box-shadow: var(--yt-shadow);
48        font-family: Inter, Arial, sans-serif; color: var(--yt-ink);

Open full file

Download project9 MB