Plan cards

Subscription tiers; the one you need lifts

Prompt for your agentpaste into Claude Code or Codex

Add the "Plan cards" video component (Grok, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/plan-cards.zip?v=92a693124ddb and unzip it into components/plan-cards/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/plan-cards && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o plan-cards.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":"ChatGPT"},{"value":"1","label":"Claude"},{"value":"2","label":"Grok"}]},
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>Plan cards</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    <script src="assets/skins/chatgpt/icons.js"></script>
14    <script src="assets/skins/claude/icons.js"></script>
15    <script src="assets/skins/grok/icons.js"></script>
16    <style>
17      * { margin: 0; padding: 0; box-sizing: border-box; }
18      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
19      body.is-dark { background: #0e0e0f; }
20      body.is-grok { background: #f9f8f7; }
21      body.is-grok.is-dark { background: #131211; }
22 
23      /* ---------- stage (DESIGN.md; Grok uses grok.com's own page tokens) ---------- */
24      #root {
25        --stage: #f5f5f4;
26        width: 100%; height: 100%; position: relative; overflow: hidden;
27        background: var(--stage);
28        font-family: "Inter", sans-serif;
29        -webkit-font-smoothing: antialiased;
30        text-rendering: optimizeLegibility;
31        font-feature-settings: "kern" 1, "calt" 1;
32      }
33      #root.is-dark { --stage: #0e0e0f; }
34      #root.is-grok { --stage: #f9f8f7; }
35      #root.is-grok.is-dark { --stage: #131211; }
36      #stage { position: absolute; inset: 0; }
37      #cam { position: absolute; inset: 0; }
38 
39      /* The plan picker is laid out at native UI px and presented at 1.8x (scale on #ui). */
40      #ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; }
41 
42      /* ---------- product tokens ----------
43         ChatGPT: skin/chatgpt tokens (Inter for OpenAI Sans, ink #0d0d0d, black primary, pill buttons)
44         Claude:  skin/claude tokens (Inter 430 opsz 32 for Anthropic Sans, Source Serif 4 for the serif,
45                  clay #c6613f primary / #d97757 accent, rounded-rect buttons)
46         Grok:    skin/grok tokens (grok.com live DOM: #050505 ink, #e6e5e3 border, 24px card radius, pills) */
47      .p-chatgpt {
48        --card: #ffffff; --card-2: #fdfdfd; --edge: rgba(0, 0, 0, 0.08);

Open full file

Download project1 MB