Usage meter

The real usage panel: 5-hour and weekly bars fill to a percent

Prompt for your agentpaste into Claude Code or Codex

Add the "Usage meter" video component (Claude, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/usage-meter.zip?v=7c26a3b0c63d and unzip it into components/usage-meter/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/usage-meter && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o usage-meter.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":"Codex"},{"value":"2","label":"Cursor"}]},
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    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
14    <link rel="stylesheet" href="assets/skins/codex/skin.css" />
15    <link rel="stylesheet" href="assets/skins/cursor/skin.css" />
16    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
17    <script src="assets/kit/motion/motion.js"></script>
18    <script src="assets/skins/claude/icons.js"></script>
19    <script src="assets/skins/codex/icons.js"></script>
20    <script src="assets/skins/cursor/icons.js"></script>
21    <style>
22      * { margin: 0; padding: 0; box-sizing: border-box; }
23      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
24 
25      /* ---------- stage (DESIGN.md tokens) ---------- */
26      #root { --stage: #f5f5f4; width: 100%; height: 100%; position: relative; overflow: hidden; }
27      #root[data-theme="dark"] { --stage: #0e0e0f; }
28      #stage { position: absolute; inset: 0; background: var(--stage); display: flex; align-items: center; justify-content: center; }
29      #cam { display: flex; align-items: center; justify-content: center; margin-top: -6px; }
30      #lift { display: block; }
31      #obj { display: block; position: relative; }
32 
33      /* macOS pointer, shared by the three variants (each uses its own skin's arrow) */
34      .um-ptr { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; color: #fff; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.28)); }
35      .um-ptr svg { width: 100%; height: 100%; display: block; overflow: visible; }
36 
37      /* =====================================================================
38         v0 · Claude: claude.ai Settings › Usage
39         A crop of the Settings page: serif "Settings" title, the section nav
40         with "Usage" selected, and the "Plan usage limits" panel.
41         Built on the shared Claude skin (.cl-usage-* rows, --ck-* tokens).
42         ===================================================================== */
43      .um-claude {
44        position: relative;
45        width: 680px;
46        padding: 24px 30px 22px 22px;
47        border-radius: 12px;
48        background: #faf9f5; /* claude.com warm-gray 050; the home render samples #fbf8f5 */

Open full file

Download project1 MB