Limit reached

The usage bar hits the cap and the product's real limit banner slides in with a reset countdown

Prompt for your agentpaste into Claude Code or Codex

Add the "Limit reached" video component (ChatGPT, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/limit-reached.zip?v=bec541534aa9 and unzip it into components/limit-reached/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/limit-reached && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o limit-reached.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
3  lang="en"
4  data-composition-variables='[
5    {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Claude"},{"value":"1","label":"ChatGPT"},{"value":"2","label":"Codex"}]},
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    <title>Limit reached</title>
13    <link rel="stylesheet" href="assets/fonts/fonts.css" />
14    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
15    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
16    <link rel="stylesheet" href="assets/skins/codex/skin.css" />
17    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
18    <script src="assets/kit/motion/motion.js"></script>
19    <script src="assets/skins/claude/icons.js"></script>
20    <script src="assets/skins/chatgpt/icons.js"></script>
21    <script src="assets/skins/codex/icons.js"></script>
22    <style>
23      * { margin: 0; padding: 0; box-sizing: border-box; }
24      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
25 
26      /* ---------- stage (DESIGN.md tokens: flat, no texture) ---------- */
27      #root { --stage: #f5f5f4; position: relative; width: 100%; height: 100%; overflow: hidden; }
28      #root[data-theme="dark"] { --stage: #0e0e0f; }
29      #stage { position: absolute; inset: 0; background: var(--stage); display: flex; align-items: center; justify-content: center; }
30      #cam { display: flex; align-items: center; justify-content: center; }
31      #lift { display: block; }
32      #obj { display: block; position: relative; }
33      .lr-frame { position: relative; }
34 
35      /* ---------- the one object: a product window at native px, zoomed ~2x on #obj ----------
36         The DESIGN.md floating-window shadow is used at half size because it sits inside the zoom
37         (a full-size 60px blur becomes 120px on screen and bands in 8-bit video). */
38      .sk-claude .cl-window.lr-win { box-shadow: 0 0 0 1px var(--ck-window-edge), 0 0.5px 1px rgba(0, 0, 0, 0.06), 0 12px 30px -10px rgba(0, 0, 0, 0.25); }
39      .sk-claude[data-theme="dark"] .cl-window.lr-win { box-shadow: 0 0 0 1px var(--ck-window-edge), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px -10px rgba(0, 0, 0, 0.8); }
40      .sk-chatgpt.cg-window.lr-win { box-shadow: 0 0 0 1px var(--cg-window-edge), 0 0.5px 1px rgba(0, 0, 0, 0.06), 0 12px 30px -10px rgba(0, 0, 0, 0.25); }
41      .sk-chatgpt.cg-window.lr-win[data-theme="dark"] { box-shadow: 0 0 0 1px var(--cg-window-edge), 0 12px 30px -10px rgba(0, 0, 0, 0.8); }
42      .sk-codex.cx-window.lr-win { box-shadow: 0 0 0 1px var(--cx-window-border), 0 0.5px 1px rgba(0, 0, 0, 0.06), 0 12px 30px -10px rgba(0, 0, 0, 0.25); }
43      .sk-codex.cx-window.lr-win[data-theme="dark"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px -10px rgba(0, 0, 0, 0.8); }
44 
45      /* ---------- status slot: the live working line and the line it settles into ---------- */
46      .lr-slot { position: relative; }
47      .lr-done { position: absolute; left: 0; top: 0; right: 0; }
48

Open full file

Download project8 MB