Before and after

A long manual checklist of steps and tools collapses into a single prompt bar

Prompt for your agentpaste into Claude Code or Codex

Add the "Before and after" video component (Time collapse, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/before-after.zip?v=a49ba5372391 and unzip it into components/before-after/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/before-after && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o before-after.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":"Steps collapse"},{"value":"1","label":"Time collapse"},{"value":"2","label":"Cost collapse"}]},
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>Before and after</title>
10    <link rel="stylesheet" href="assets/fonts/fonts.css" />
11    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
12    <link rel="stylesheet" href="assets/skins/codex/skin.css" />
13    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
14    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
15    <script src="assets/kit/motion/motion.js"></script>
16    <script src="assets/skins/chatgpt/icons.js"></script>
17    <script src="assets/skins/codex/icons.js"></script>
18    <script src="assets/skins/claude/icons.js"></script>
19    <script src="brand-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      /* ---------- DESIGN.md stage tokens ---------- */
26      #root {
27        position: relative; width: 100%; height: 100%; overflow: hidden;
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.07); --ring: rgba(0, 0, 0, 0.2); --hover: rgba(0, 0, 0, 0.035);
31        --check: #0a0a0a; --check-ink: #ffffff;
32        /* hero depth, authored in native px (x1.75 on frame): hairline ring, sharp contact, large diffuse, light from above */
33        --card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 36px -14px rgba(0, 0, 0, 0.2);
34        --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.012) 100%);
35      }
36      #root[data-theme="dark"] {
37        --stage: #0e0e0f; --surface: #18181a; --ink: #fafafa; --ink2: #a1a1a1; --ink3: #5e5e60;
38        --hair: rgba(255, 255, 255, 0.08); --ring: rgba(255, 255, 255, 0.26); --hover: rgba(255, 255, 255, 0.045);
39        --check: #fafafa; --check-ink: #0a0a0a;
40        --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -14px rgba(0, 0, 0, 0.85);
41        --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%);
42      }
43 
44      #stage { position: absolute; inset: 0; background: var(--stage); }
45      #cam { position: absolute; inset: 0; }
46      #world { position: absolute; left: 0; top: 0; }
47 
48      /* ---------- header: the number that collapses (one size for both values) ---------- */

Open full file

Download project1 MB