47
Rollout chips
Who gets it: tiers, regions, platforms light up
Add the "Rollout chips" video component (Plan tiers, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/rollout-chips.zip?v=f56a143f1bcd and unzip it into components/rollout-chips/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/rollout-chips && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o rollout-chips.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":"Plan tiers"},{"value":"1","label":"Regions"},{"value":"2","label":"Platforms"}]},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>Rollout chips</title>10 <link rel="stylesheet" href="assets/fonts/fonts.css" />11 <!-- Gemini skin: only its Google Sans @font-face is used (its rules are scoped to .sk-gemini). -->12 <link rel="stylesheet" href="assets/skins/gemini/skin.css" />13 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14 <script src="assets/kit/motion/motion.js"></script>15 <script src="assets/skins/claude/icons.js"></script>16 <script src="assets/skins/gemini/icons.js"></script>17 <style>18 * { margin: 0; padding: 0; box-sizing: border-box; }1920 /* ---- Stage (DESIGN.md) ---- */21 html { --stage: #F5F5F4; }22 html.dark { --stage: #0E0E0F; }2324 /* ---- Product skins for the card. Values come from the shared skins (chatgpt / claude / gemini skin.css)25 and the official reference frames; see DECISIONS.md. "On" is each product's own selected / primary26 surface: ChatGPT's black primary pill, Claude's #F6E9DA Output chip, Google's tonal blue chip. ---- */27 html.p-chatgpt {28 --font: 'Inter', sans-serif;29 --card: #FFFFFF; --card-edge: #ECECEC; --card-r: 16px;30 --card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 24px -16px rgba(0,0,0,0.12);31 --mark: 20px; --head-gap: 9px;32 --title: #0D0D0D; --title-2: #737373; --title-w: 500; --title-2-w: 400; --title-ls: -0.01em; --sub: #5D5D5D;33 --sec: #5D5D5D; --count-n: #0D0D0D; --well: #F9F9F9;34 --rim-off: rgba(0,0,0,0.08); --fill-on: #0D0D0D;35 --lbl-off: #8F8F8F; --lbl-on: #FFFFFF; --meta-off: #8F8F8F; --meta-on: #B4B4B4;36 --glyph-off: #C4C4C4; --glyph-x: #A3A3A3; --disc: #FFFFFF; --disc-ink: #0D0D0D; --tick: #0D0D0D; --mono: #0D0D0D;37 --pill-bg0: #F3F3F3; --pill-fg0: #5D5D5D; --pill-bg1: #0D0D0D; --pill-fg1: #FFFFFF;38 --chip-h: 36px; --chip-r: 999px; --pad-l: 10px; --pad-r: 14px; --ind: 18px; --lbl-gap: 8px; --lbl-w: 500; --meta-w: 500;39 }40 html.p-chatgpt.dark {41 --card: #1E1E1E; --card-edge: #2E2E2E;42 --card-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 14px 34px -18px rgba(0,0,0,0.7);43 --title: #FAFAFA; --title-2: #8A8A8A; --sub: #B4B4B4;44 --sec: #B4B4B4; --count-n: #FAFAFA; --well: #262626;45 --rim-off: rgba(255,255,255,0.09); --fill-on: #F7F7F7;46 --lbl-off: #7C7C7C; --lbl-on: #0D0D0D; --meta-off: #7C7C7C; --meta-on: #5D5D5D;47 --glyph-off: #4E4E4E; --glyph-x: #7C7C7C; --disc: #0D0D0D; --disc-ink: #F7F7F7; --tick: #FAFAFA; --mono: #FAFAFA;48 --pill-bg0: #2C2C2C; --pill-fg0: #B4B4B4; --pill-bg1: #F7F7F7; --pill-fg1: #0D0D0D;