16
Prompt reveal
The full prompt, big and readable; key phrases light up as read
Add the "Prompt reveal" video component (Long prompt that scrolls, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/prompt-reveal.zip?v=24ea5f99ad10 and unzip it into components/prompt-reveal/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/prompt-reveal && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o prompt-reveal.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":"One-liner (Claude)"},{"value":"1","label":"Long prompt that scrolls (ChatGPT)"},{"value":"2","label":"Prompt with attached files (Claude)"}]},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>Prompt reveal</title>10 <link rel="stylesheet" href="assets/fonts/fonts.css" />11 <link rel="stylesheet" href="assets/skins/claude/skin.css" />12 <link rel="stylesheet" href="assets/skins/chatgpt/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/claude/icons.js"></script>16 <script src="assets/skins/chatgpt/icons.js"></script>17 <style>18 * { margin: 0; padding: 0; box-sizing: border-box; }19 /* stage: the library tokens, except on Claude, whose windowless home render sits on its own warm canvas */20 :root { --stage: #f5f5f4; }21 body.is-dark { --stage: #0e0e0f; }22 body.p-claude { --stage: #faf9f5; } /* claude.com warm gray 050 (home render samples #fbf8f5) */23 body.p-claude.is-dark { --stage: #141413; } /* warm gray 950 (dark frame samples #151515) */24 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }25 #root { position: relative; width: 100%; height: 100%; overflow: hidden; }26 #stage { position: absolute; inset: 0; background: var(--stage); }2728 /* one hero object, centred; the push-in scales this layer */29 #cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 20px; }30 .scene { display: none; }31 .scene.is-on { display: block; }3233 /* ---------- the prompt layer (shared) ---------- */34 .pr-flow { position: relative; isolation: isolate; white-space: normal; }35 .pr-text { white-space: pre-wrap; word-break: break-word; }36 /* markers live in their own layer behind the words, one rounded rect per line of a phrase */37 .pr-marks { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; }38 .pr-mark { position: absolute; width: 0; border-radius: 4.5px; background: var(--pr-mark); }39 /* a key phrase gets 1px of air each side, so its marker (2.5px pad) stays clear of the neighbouring words */40 .pp { margin: 0 1px; }41 .pp.is-tight { margin-right: 0.5px; } /* phrase followed straight by punctuation */42 .pr-c.is-hidden { visibility: hidden; }43 .pr-caret { position: absolute; left: 0; top: 0; width: 1.5px; height: 19px; border-radius: 1px; }44 .pr-ph { position: absolute; left: 0; top: 0; white-space: nowrap; }4546 /* ---------- Claude: windowless home render (official close-up frame) ---------- */47 #skc { background: transparent; --pr-mark: rgba(217, 119, 87, 0.24); }48 #skc[data-theme="dark"] { --pr-mark: rgba(217, 119, 87, 0.22); }