From ae5646539764f53dbad404a45dcd51374f2f5c79 Mon Sep 17 00:00:00 2001 From: Mike Mooring Date: Sat, 13 Jun 2026 23:25:38 -0700 Subject: [PATCH 1/4] feat(site): hero npx bar + bottom dock, control-room backdrop, newsletter spacing - Hero: replace the Get Started / See How It Works buttons with the full-width `npx @kill-switch/agent-guard usage` terminal bar. - Dock that same bar fixed to the bottom once you scroll past the hero; it fades out at the footer so the copyright/Privacy/Terms links stay readable (IntersectionObserver on the hero bar + footer copyright). - Drop the now-redundant npx bar from the "real Claude Code limits" section. - Re-center the Horror Stories newsletter panel (clamp() margins) so it no longer crowds the embed wall above it. - Control room (lab): hero-control-room video as the cinematic backdrop, grain/scanline/vignette illustration pass, darker-metallic detailed agent, single floating live-gauge monitor. - Launch blog assets (poster/thumb) + preview-limits page. site/index.html and site/public/index.html kept byte-identical. Co-Authored-By: Claude Opus 4.8 (1M context) --- site/index.html | 104 +++++-- .../poster-see-your-claude-code-limits.png | Bin 0 -> 753001 bytes .../poster-see-your-claude-code-limits.webp | Bin 0 -> 26364 bytes .../thumb-see-your-claude-code-limits.mp4 | Bin 0 -> 2004184 bytes .../thumb-see-your-claude-code-limits.webm | Bin 0 -> 764138 bytes site/public/index.html | 104 +++++-- site/public/lab/control-room.html | 269 +++++++----------- site/public/preview-limits.html | 95 +++++++ 8 files changed, 361 insertions(+), 211 deletions(-) create mode 100644 site/public/blog/assets/poster-see-your-claude-code-limits.png create mode 100644 site/public/blog/assets/poster-see-your-claude-code-limits.webp create mode 100644 site/public/blog/assets/thumb-see-your-claude-code-limits.mp4 create mode 100644 site/public/blog/assets/thumb-see-your-claude-code-limits.webm create mode 100644 site/public/preview-limits.html diff --git a/site/index.html b/site/index.html index 4899f14..fc90bdc 100644 --- a/site/index.html +++ b/site/index.html @@ -86,8 +86,8 @@ .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; - height: 220px; - background: linear-gradient(to bottom, transparent 0%, #0c1229 100%); + height: 320px; + background: linear-gradient(to bottom, transparent 0%, rgba(12,18,41,0.7) 55%, #0c1229 100%); pointer-events: none; z-index: 1; } @@ -585,6 +585,25 @@ .ag-npx-copy.copied { color:#28c840; border-color:rgba(40,200,64,.4); } .ag-npx-copy.copied svg { display:none; } .ag-npx-copy.copied .ag-npx-copied { display:inline; } + /* hero: constrain the npx bar so it doesn't span the full hero width */ + .hero-actions .ag-npx { margin-top:0; max-width:640px; } + /* docked npx bar: fixed to the bottom once you scroll past the hero, fades out at the footer */ + .ag-npx-dock { position:fixed; left:0; right:0; bottom:0; z-index:60; + display:flex; justify-content:center; + padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px)); + background:linear-gradient(to top, rgba(7,10,20,.97) 35%, rgba(7,10,20,0)); + opacity:0; transform:translateY(16px); pointer-events:none; + transition:opacity .35s ease, transform .35s ease; } + .ag-npx-dock.show { opacity:1; transform:none; pointer-events:auto; } + .ag-npx-dock .ag-npx { margin-top:0; width:fit-content; max-width:min(560px,92vw); + box-shadow:0 18px 50px -18px rgba(0,0,0,.85); transition:transform .4s ease, border-color .2s; } + .ag-npx-dock .ag-npx-line { flex:0 0 auto; } + /* over the Agent Guard section, slide the bar left so it clears the terminal on the right */ + .ag-npx-dock.dock-left .ag-npx { transform:translateX(calc(-1 * clamp(0px, 20vw, 300px))); } + @media (max-width:860px) { .ag-npx-dock.dock-left .ag-npx { transform:none; } } + @media (max-width: 860px) { .ag-npx-dock { padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)); } + .ag-npx-dock .ag-npx { font-size:13px; padding:13px 12px 13px 16px; } } + @media (prefers-reduced-motion: reduce) { .ag-npx-dock { transition:opacity .2s ease; transform:none; } } .ag-panel { background:#0b1020; border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.5); padding:22px 22px 24px; } .ag-chip { display:inline-flex; align-items:center; gap:9px; background:#0a0f24; @@ -616,19 +635,22 @@ .ag-term.go .cc { animation:ccfade .5s ease both; } .ag-term.go .l1{ animation-delay:.2s } .ag-term.go .l2{ animation-delay:1.4s } .ag-term.go .l3{ animation-delay:1.8s } .ag-term.go .l4{ animation-delay:2.2s } - .ag-term.go .l5{ animation-delay:2.6s } .ag-term.go .l6{ animation-delay:2.9s } + .ag-term.go .l5{ animation-delay:2.6s } .ag-term.go .l6{ animation-delay:3.95s } @keyframes ccfade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } } .ag-term-body .dim{ color:#7c84a8; } .ag-term-body .grn{ color:#28c840; } .ag-term-body .red{ color:#ff6b6b; } .ag-prompt { color:#5ce2e7; } - .ag-type { display:inline-block; white-space:nowrap; overflow:hidden; vertical-align:bottom; max-width:0; } + .ag-type, .ag-type5 { display:inline-block; white-space:nowrap; overflow:hidden; vertical-align:bottom; max-width:0; } .ag-term.go .ag-type { animation:agtyp 1.05s steps(28,end) .35s both; } @keyframes agtyp { from { max-width:0; } to { max-width:30ch; } } + /* l5: type out the `agent-guard usage` command after the build steps finish */ + .ag-term.go .ag-type5 { animation:agtyp5 .85s steps(17,end) 2.95s both; } + @keyframes agtyp5 { from { max-width:0; } to { max-width:18ch; } } .ag-cur { display:inline-block; width:8px; height:14px; background:#5ce2e7; vertical-align:middle; margin-left:2px; opacity:0; } .ag-term.go .ag-cur { animation:agblink 1.1s step-end .35s infinite; } @keyframes agblink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } } .ag-term .ag-gauges { margin-top:8px; } - .ag-term.go .ag-fill { animation:agfill 1.1s cubic-bezier(.2,.8,.2,1) 3.1s both; } + .ag-term.go .ag-fill { animation:agfill 1.1s cubic-bezier(.2,.8,.2,1) 4.15s both; } .ag-statusline { display:flex; align-items:center; gap:13px; flex-wrap:wrap; padding:9px 16px; background:linear-gradient(90deg,#0e1733,#0b1124); border-top:1px solid rgba(255,255,255,.08); font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#aeb6da; } @@ -641,6 +663,7 @@ .ag-term .cc { opacity:1 !important; animation:none !important; } .ag-term .ag-fill { width:var(--w) !important; animation:none !important; } .ag-term .ag-type { max-width:30ch !important; animation:none !important; } + .ag-term .ag-type5 { max-width:18ch !important; animation:none !important; } .ag-term .ag-cur { display:none; } } @@ -805,6 +828,12 @@ } /* let the header sit over the visible video (shorter top fade) */ .video-bg-section.show-video-top::before { height: 72px; } + /* dissolve the video into the bg over the section's lower half so there's no hard + cut-off behind the newsletter — independent of where the video frame happens to end */ + .video-bg-section.show-video-top > video { + -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); + mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); + } .embed-wall-track .twitter-tweet, .embed-wall-track .reddit-embed-bq { margin: 0 auto !important; @@ -836,7 +865,7 @@ } /* ── Newsletter CTA ──────────────────────────── */ .newsletter-cta { - max-width: 560px; margin: 80px auto 0; text-align: center; + max-width: 560px; margin: clamp(168px, 21vh, 280px) auto clamp(72px, 10vh, 140px); text-align: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 28px 24px; @@ -1108,8 +1137,14 @@

the bill arrives. Cloudflare, GCP, AWS — and Claude Code, Cursor, or any agent.

- Get Started - See How It Works +
+ $ > + npx @kill-switch/agent-guard usage + +
@@ -1151,7 +1186,7 @@

⏺ Read  src/claude-usage.ts
⏺ Edit  src/claude-usage.ts  +34 -2
⏺ Bash  npm test  ✓ 119 passed
-
❯ agent-guard usage
+
❯ agent-guard usage
5-hour limit12%
@@ -1183,14 +1218,6 @@

-
- $ > - npx @kill-switch/agent-guard usage - -
@@ -1585,6 +1612,18 @@
+