API price tag

$ in / $ out per 1M tokens with the old price struck through

Prompt for your agentpaste into Claude Code or Codex

Add the "API price tag" video component (3-model compare, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/api-price-tag.zip?v=3c06565e0f81 and unzip it into components/api-price-tag/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/api-price-tag && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o api-price-tag.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":"Single model"},{"value":"1","label":"3-model compare"},{"value":"2","label":"Price cut"}]},
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>API price tag</title>
10    <link rel="stylesheet" href="assets/fonts/fonts.css" />
11    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
12    <script src="assets/kit/motion/motion.js"></script>
13    <style>
14      * { margin: 0; padding: 0; box-sizing: border-box; }
15      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
16      body.is-dark { background: #0e0e0f; }
17 
18      /* ---------- stage tokens (DESIGN.md) ---------- */
19      #root {
20        --stage: #f5f5f4;
21        --surface: #ffffff;
22        --tile: #f4f4f3;
23        --ink: #0a0a0a;
24        --ink-2: #6b6b6b;
25        --ink-3: #a3a3a3;
26        --hair: rgba(0, 0, 0, 0.08);
27        --edge: rgba(0, 0, 0, 0.07);
28        --strike: #0a0a0a;        /* drawn in the colour of the price it cancels ... */
29        --strike-rest: #6b6b6b;   /* ... and greys with it, so at rest the old price is one muted unit */
30        --pill-bg: rgba(10, 10, 10, 0.06);
31        --pill-ink: #0a0a0a;
32        --hl-bg: rgba(10, 10, 10, 0.05);
33        --hl-edge: rgba(10, 10, 10, 0.12);
34        /* native px; presented at zoom 2 so these land on the DESIGN.md shadow token */
35        --lift: 0 0.5px 1px rgba(0, 0, 0, 0.06), 0 12px 30px -10px rgba(0, 0, 0, 0.25);
36        --tile-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.07);
37        width: 100%; height: 100%; position: relative; overflow: hidden;
38        font-family: "Inter", sans-serif;
39        -webkit-font-smoothing: antialiased;
40        text-rendering: optimizeLegibility;
41        color: var(--ink);
42      }
43      #root.is-dark {
44        --stage: #0e0e0f;
45        --surface: #18181a;
46        --tile: #232325;
47        --ink: #fafafa;
48        --ink-2: #a1a1a1;

Open full file

Download project1 MB