20
Build gallery
A clean grid or reel of real things people built with a model, each with its creator handle and the model's mark
Add the "Build gallery" video component (Single hero, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/build-gallery.zip?v=b13919c9eec7 and unzip it into components/build-gallery/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/build-gallery && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o build-gallery.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":"2x2 grid"},{"value":"1","label":"Horizontal reel"},{"value":"2","label":"Single hero"}]},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="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>12 <script src="assets/kit/motion/motion.js"></script>13 <style>14 * { margin: 0; padding: 0; box-sizing: border-box; }15 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }16 body.is-dark { background: #0E0E0F; }1718 /* ---------- stage tokens (DESIGN.md) ---------- */19 #root {20 position: relative; width: 100%; height: 100%;21 font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased;22 --stage: #F5F5F4; --surface: #FFFFFF; --ink: #0A0A0A; --ink2: #6B6B6B; --ink3: #A3A3A3;23 --hair: rgba(0,0,0,0.08); --ring: rgba(0,0,0,0.06);24 --shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06), 0 24px 60px -20px rgba(0,0,0,0.25);25 --shadow-lift: 0 0 0 1px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.07), 0 36px 72px -22px rgba(0,0,0,0.32);26 --like-bg: rgba(217,119,87,0.12); --like-ink: #A64E2D;27 --av-bg: #EDEDEB; --av-ink: #6B6B6B; --av-ring: rgba(0,0,0,0.05);28 color: var(--ink); background: var(--stage);29 }30 #root[data-theme="dark"] {31 --stage: #0E0E0F; --surface: #18181A; --ink: #FAFAFA; --ink2: #A1A1A1; --ink3: #5E5E60;32 --hair: rgba(255,255,255,0.10); --ring: rgba(255,255,255,0.10);33 --shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px -20px rgba(0,0,0,0.8);34 --shadow-lift: 0 0 0 1px rgba(255,255,255,0.09), 0 36px 72px -22px rgba(0,0,0,0.95);35 --like-bg: rgba(217,119,87,0.16); --like-ink: #F0A487;36 --av-bg: #2A2A2D; --av-ink: #A1A1A1; --av-ring: rgba(255,255,255,0.06);37 }38 #stage { position: absolute; inset: 0; background: var(--stage); overflow: hidden; }39 #fade { position: absolute; inset: 0; }40 #scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }4142 /* ---------- card (native UI px; presented with CSS zoom) ---------- */43 .card-wrap { position: relative; flex: none; }44 .card-inner { position: relative; }45 .card-glow { position: absolute; inset: 0; border-radius: 18px; box-shadow: var(--shadow-lift); opacity: 0; }46 .card { position: relative; border-radius: 18px; padding: 6px; background: var(--surface); box-shadow: var(--shadow); }47 #root[data-theme="dark"] .card { background: linear-gradient(180deg, #1C1C1F 0%, #18181A 45%); }48 .thumb { position: relative; border-radius: 12px; overflow: hidden; isolation: isolate; }