71
Floating screenshot
A screenshot of an AI product on the stage with a soft shadow and a source chip
Add the "Floating screenshot" video component (Cascade, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/floating-screenshot.zip?v=18d96d387485 and unzip it into components/floating-screenshot/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/floating-screenshot && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o floating-screenshot.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":"Single · ChatGPT"},{"value":"1","label":"Stacked pair · Claude + Codex"},{"value":"2","label":"Cascade · ChatGPT, Claude, 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>Floating screenshot</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/codex/skin.css" />15<link rel="stylesheet" href="assets/skins/gemini/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/codex/icons.js"></script>19<script src="assets/skins/gemini/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; --hair: rgba(0, 0, 0, 0.08);25 /* the screenshot: a sharp contact edge plus DESIGN's window shadow, light from above */26 --shot-edge: inset 0 0 0 1px rgba(0, 0, 0, 0.07);27 --shot-contact: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);28 --shot-lift: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.20);29 --shot-high: 0 36px 72px -28px rgba(0, 0, 0, 0.20);30 --chip-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 22px -12px rgba(0, 0, 0, 0.22);31 }32 html[data-theme="dark"] {33 --stage: #0e0e0f; --surface: #18181a; --ink: #fafafa; --ink-2: #a1a1a1; --hair: rgba(255, 255, 255, 0.10);34 --shot-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.05);35 --shot-contact: 0 1px 2px rgba(0, 0, 0, 0.6);36 --shot-lift: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.8);37 --shot-high: 0 40px 80px -26px rgba(0, 0, 0, 0.75);38 --chip-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 26px -12px rgba(0, 0, 0, 0.8);39 }40 * { margin: 0; padding: 0; box-sizing: border-box; }41 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }42 #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", system-ui, sans-serif; }43 #scene, #cam, #fader { position: absolute; inset: 0; }44 #stack { position: absolute; left: 0; top: 0; }4546 /* ---------- one screenshot ---------- */47 .shot { position: absolute; }48 .shot-body { position: absolute; inset: 0; }