From 684ed5e4ea3526996c253beea49f9ab13a3e82ce Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Wed, 11 Mar 2026 11:29:14 +0000
Subject: [PATCH] feat: add typewriter animation to hero headline

Cycles through agent names (Claude Code, Cursor, Codex, Copilot,
Goose, Amp, any agent) with a typing/deleting animation and
blinking cursor. Removes the static label above the headline.
---
 docs/src/app/home.css |  3 +++
 docs/src/app/page.tsx | 35 ++++++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/home.css b/docs/src/app/home.css
index 302d386..52f6379 100644
--- a/docs/src/app/home.css
+++ b/docs/src/app/home.css
@@ -42,6 +42,9 @@
 .hp-hero { padding: 80px 0 48px; text-align: center; }
 .hp-hero-label { font-family: var(--hp-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hp-accent); margin-bottom: 16px; }
 .hp-hero h1 { font-family: var(--hp-title); font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; }
+.hp-typewriter { color: var(--hp-accent); }
+.hp-cursor { display: inline-block; width: 3px; height: 0.9em; background: var(--hp-accent); margin-left: 2px; vertical-align: baseline; animation: blink 0.6s step-end infinite; }
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 .hp-hero p { font-size: 18px; color: var(--hp-text-dim); max-width: 640px; margin: 0 auto; line-height: 1.6; font-weight: 300; }
 
 /* CODE BLOCK */
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
index 6fc6035..5f2e587 100644
--- a/docs/src/app/page.tsx
+++ b/docs/src/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import './home.css';
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 function copyCmd(id: string, btn: HTMLButtonElement) {
   const el = document.getElementById(id);
@@ -12,6 +12,36 @@ function copyCmd(id: string, btn: HTMLButtonElement) {
   });
 }
 
+const AGENTS = ['Claude Code', 'Cursor', 'Codex', 'Copilot', 'Goose', 'Amp', 'any agent'];
+
+function TypewriterAgent() {
+  const [index, setIndex] = useState(0);
+  const [text, setText] = useState('');
+  const [deleting, setDeleting] = useState(false);
+
+  const word = AGENTS[index];
+
+  useEffect(() => {
+    if (!deleting && text === word) {
+      const pause = index === AGENTS.length - 1 ? 4000 : 2000;
+      const timer = setTimeout(() => setDeleting(true), pause);
+      return () => clearTimeout(timer);
+    }
+    if (deleting && text === '') {
+      setDeleting(false);
+      setIndex((i) => (i + 1) % AGENTS.length);
+      return;
+    }
+    const speed = deleting ? 40 : 80;
+    const timer = setTimeout(() => {
+      setText(deleting ? word.slice(0, text.length - 1) : word.slice(0, text.length + 1));
+    }, speed);
+    return () => clearTimeout(timer);
+  }, [text, deleting, word, index]);
+
+  return <span className="hp-typewriter">{text}<span className="hp-cursor" /></span>;
+}
+
 function CodeTabs() {
   const [active, setActive] = useState('api-gateway');
 
@@ -102,8 +132,7 @@ export default function HomePage() {
       {/* HERO */}
       <section className="hp-hero">
         <div className="hp-container">
-          <div className="hp-hero-label">For Claude Code, Cursor, Copilot, and any agent</div>
-          <h1>Debug mode for<br />any agent</h1>
+          <h1>Debug mode for<br /><TypewriterAgent /></h1>
           <p>Agents can read your code but they can&apos;t see what happened at runtime. agentcrumbs lets them drop structured traces inline while writing code, then query those traces when something breaks. Stripped before merge, zero cost when off.</p>
         </div>
       </section>