50
Run receipt
A receipt prints for one task: tokens, minutes, tool calls, total cost
Add the "Run receipt" video component (Swarm run, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/run-receipt.zip?v=86b80da596d4 and unzip it into components/run-receipt/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/run-receipt && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o run-receipt.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 run"},{"value":"1","label":"Overnight run"},{"value":"2","label":"Swarm run"}]},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="assets/kit/motion/motion.js"></script>12 <style>13 * { margin: 0; padding: 0; box-sizing: border-box; }14 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }15 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }1617 /* ---------- library stage tokens (DESIGN.md) + object materials ---------- */18 #stage { position: absolute; inset: 0; background: var(--stage); }19 #stage[data-theme="light"] {20 --stage: #F5F5F4; --ink: #0A0A0A; --ink-2: #6B6B6B; --ink-3: #A3A3A3; --hair: rgba(0, 0, 0, 0.08);21 /* printer: pale grey ABS, a shade under the paper so the white receipt separates from it; key light from above */22 --dev-deck: linear-gradient(180deg, #F4F4F2 0%, #E6E6E2 100%);23 --dev-front: linear-gradient(180deg, #F1F1EE 0%, #E5E5E1 48%, #D9D9D5 100%);24 --dev-edge: rgba(0, 0, 0, 0.16);25 --dev-hi: rgba(255, 255, 255, 0.95);26 --dev-shadow: 0 1px 1px rgba(0, 0, 0, 0.10), 0 7px 10px -7px rgba(0, 0, 0, 0.22), 0 22px 32px -18px rgba(0, 0, 0, 0.28);27 --slit: linear-gradient(180deg, #2C2C2A 0%, #4C4C49 70%, #63635F 100%);28 --slit-in: inset 0 1.5px 1.5px rgba(0, 0, 0, 0.55);29 --lip: rgba(255, 255, 255, 0.95);30 --blade: linear-gradient(180deg, #E4E4E1 0%, #B9B9B4 55%, #9E9E99 100%);31 --blade-edge: rgba(0, 0, 0, 0.22);32 --contact: rgba(0, 0, 0, 0.34);33 --btn: #E3E3DF; --btn-in: rgba(0, 0, 0, 0.20);34 --lens: radial-gradient(circle at 50% 38%, #3A3A38 0%, #1C1C1B 75%);35 --lens-ring: 0 0.75px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.6px rgba(0, 0, 0, 0.30);36 /* thermal paper */37 --paper: linear-gradient(180deg, #FFFFFF 0%, #FCFBF9 100%); --paper-end: #FCFBF9;38 --p-ink: #1F1E1C; --p-ink-2: #67635B; --p-mark: #8A867E; --p-rule: rgba(31, 30, 28, 0.30); --p-tick: rgba(31, 30, 28, 0.45);39 --slot-shade: rgba(0, 0, 0, 0.14);40 /* paper shadows: a hairline + contact shadow on paper and stub together (so the pre-tear seam is invisible),41 plus a lift shadow on the receipt alone once it is torn free */42 --sh-a: drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.22)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0px 5px 9px rgba(0, 0, 0, 0.05));43 --sh-b: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.07)) drop-shadow(0px 14px 18px rgba(0, 0, 0, 0.11));44 }45 #stage[data-theme="dark"] {46 --stage: #0E0E0F; --ink: #FAFAFA; --ink-2: #A1A1A1; --ink-3: #5E5E60; --hair: rgba(255, 255, 255, 0.10);47 /* printer: graphite, key light from above */48 --dev-deck: linear-gradient(180deg, #363639 0%, #29292C 100%);