feat: typewriter animation for hero headline (#20)

## Summary
- Hero headline now reads "Debug mode for [agent name]" with a
typewriter effect
- Cycles through: Claude Code, Cursor, Codex, Copilot, Goose, Amp, any
agent
- Agent name shown in green with a blinking cursor
- Removes the static "For Claude Code, Cursor, Copilot, and any agent"
label

## Test plan
- [ ] `pnpm docs:dev` and check homepage hero
- [ ] Typewriter types out each name, pauses, deletes, moves to next
- [ ] "any agent" pauses longer (4s vs 2s)
- [ ] Loops back to Claude Code after completing the cycle

Author: ericallam

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 */

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>