Prompt to result

Prompt card, arrow, the output under the product wordmark

Prompt for your agentpaste into Claude Code or Codex

Add the "Prompt to result" video component (Image (ChatGPT Images), light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/prompt-to-result.zip?v=09a5dd14563f and unzip it into components/prompt-to-result/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/prompt-to-result && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o prompt-to-result.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":"App (Codex)"},{"value":"1","label":"3D scene (Codex + Blender)"},{"value":"2","label":"Image (ChatGPT Images)"}]},
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    <link rel="stylesheet" href="assets/skins/codex/skin.css" />
11    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
12    <link rel="stylesheet" href="assets/skins/device/skin.css" />
13    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
15    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/environments/RoomEnvironment.js"></script>
16    <script src="assets/kit/motion/motion.js"></script>
17    <script src="assets/skins/codex/icons.js"></script>
18    <script src="assets/skins/chatgpt/icons.js"></script>
19    <script src="assets/skins/device/icons.js"></script>
20    <style>
21      * { margin: 0; padding: 0; box-sizing: border-box; }
22      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }
23      body.is-dark { background: #0E0E0F; }
24 
25      /* ---------- stage tokens (DESIGN.md) ---------- */
26      #root {
27        position: relative; width: 100%; height: 100%;
28        font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased;
29        --stage: #F5F5F4; --surface: #FFFFFF; --ink: #0A0A0A; --ink2: #6B6B6B; --ink3: #A3A3A3;
30        --hair: rgba(0,0,0,0.08);
31        --shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06), 0 24px 60px -20px rgba(0,0,0,0.25);
32        --arrow: #6B6B6B;
33        color: var(--ink); background: var(--stage);
34      }
35      #root[data-theme="dark"] {
36        --stage: #0E0E0F; --surface: #18181A; --ink: #FAFAFA; --ink2: #A1A1A1; --ink3: #5E5E60;
37        --hair: rgba(255,255,255,0.10);
38        --shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 60px -20px rgba(0,0,0,0.8);
39        --arrow: #A1A1A1;
40      }
41      #stage { position: absolute; inset: 0; background: var(--stage); overflow: hidden; }
42      #scene { position: absolute; inset: 0; }
43 
44      /* ---------- prompt card (product surface, presented with CSS zoom) ---------- */
45      #cardPos { position: absolute; left: 0; top: 0; box-shadow: var(--shadow); }
46      #cardZoom { position: absolute; left: 0; top: 0; }
47      .pcard { position: relative; overflow: hidden; border-radius: 20px; width: var(--card-w); height: var(--card-h); }
48      .pcard .p-home { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }

Open full file

Download project1 MB