Skip to content

redesign(site): keycard-inspired theme + live resizing animation - #4

Merged
Fraser-Isbester merged 1 commit into
mainfrom
site-keycard-redesign
Jul 9, 2026
Merged

Fraser-Isbester merged 1 commit into
mainfrom
site-keycard-redesign

Conversation

@Fraser-Isbester

Copy link
Copy Markdown
Owner

What

Rebuilds the branding site in the visual language of keycard.ai and adds a live animation:

  • Near-black grid canvas, Geist / Geist Mono type, violet accent + green "live" status.
  • Hero autoscaler console: a <canvas> that streams a live CPU-utilization graph with a P95 line, then periodically resizes the instance — the machine-type badge flips, the line renormalizes to the new capacity, a savings pill floats up, and a log line types in. Demand is a function of time, so utilization is a physical consequence of demand / provisioned vCPUs.
  • Scroll-reveal sections; respects prefers-reduced-motion (static frame fallback).
  • Restyled how-it-works / features / deploy to match.

Why

Requested: adopt the keycard.ai design and animate the resizing as a CPU-usage graph.

Notes

  • Animation is dependency-free (site/app.js). Geist loads from Google Fonts.
  • Verified with headless Chrome (hero + full page). Site-only change.

🤖 Generated with Claude Code

Rebuilds the site in the visual language of keycard.ai and adds the
animation you asked for:
- Near-black canvas with a faint grid, Geist / Geist Mono type, a violet
  accent and a green "live" status.
- Signature hero "autoscaler console": a canvas that streams a live CPU
  utilization graph with a P95 line, then periodically resizes the
  instance — the machine-type badge flips, the line renormalizes to the
  new capacity, a savings pill floats up, and a log line types in.
  Demand is a real function of time, so utilization is a physical
  consequence of demand / provisioned vCPUs.
- Scroll-reveal on sections; respects prefers-reduced-motion (renders a
  static frame instead).
- Restyled how-it-works, features, and deploy sections to match.

Animation lives in site/app.js (no dependencies). Geist loads from
Google Fonts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@Fraser-Isbester
Fraser-Isbester merged commit 573473e into main Jul 9, 2026
6 checks passed
@Fraser-Isbester
Fraser-Isbester deleted the site-keycard-redesign branch July 9, 2026 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant