36
Context window
A container fills with documents up to the model limit
Add the "Context window" video component (272K vs 1M, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/context-window.zip?v=def84f5e5f8e and unzip it into components/context-window/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/context-window && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o context-window.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<html3 lang="en"4 data-composition-variables='[5 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"One model"},{"value":"1","label":"272K vs 1M"},{"value":"2","label":"Context rot"}]},6 {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}7 ]'8>9 <head>10 <meta charset="UTF-8" />11 <meta name="viewport" content="width=1920, height=1080" />12 <link rel="stylesheet" href="assets/fonts/fonts.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/chatgpt/icons.js"></script>17 <script src="assets/skins/gemini/icons.js"></script>18 <style>19 * { margin: 0; padding: 0; box-sizing: border-box; }20 html, body { width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }2122 /* ---------- stage tokens (DESIGN.md) ---------- */23 #root {24 --stage: #f5f5f4;25 --surface: #ffffff;26 --ink: #0a0a0a;27 --ink2: #6b6b6b;28 --ink3: #a3a3a3;29 --hair: rgba(0, 0, 0, 0.08);30 --shadow-2x: 0 0.5px 1px rgba(0, 0, 0, 0.06), 0 12px 30px -10px rgba(0, 0, 0, 0.25);31 /* component material */32 --vessel-ring: rgba(0, 0, 0, 0.05);33 --vessel-lip: rgba(255, 255, 255, 1);34 --well: #f3f3f2;35 --well-shade: inset 0 1px 2px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.045);36 --slab-a: #ffffff;37 --slab-b: #fbfbfa;38 --slab-shadow: 0 0 0 1px rgba(0, 0, 0, 0.065), 0 1px 2px rgba(0, 0, 0, 0.06), 0 3px 8px -4px rgba(0, 0, 0, 0.08);39 --slab-lip: inset 0 1px 0 rgba(255, 255, 255, 1);40 --lift-shadow: 0 0 0 1px rgba(0, 0, 0, 0.065), 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 22px -10px rgba(0, 0, 0, 0.28);41 --icon: #6b6b6b;42 --dash: rgba(0, 0, 0, 0.26);43 --line-ink: rgba(10, 10, 10, 0.6);44 --tag-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 18px -10px rgba(0, 0, 0, 0.2);45 --hatch-ink: rgba(0, 0, 0, 0.06);46 --accent: #0a0a0a;47 --accent-tint: rgba(217, 119, 87, 0.1);48 --accent-hatch: rgba(217, 119, 87, 0.42);