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 (Single model, 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":"0","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