/* Hero — three variants: terminal, diagram, editorial */ const TerminalDemo = () => { const [step, setStep] = React.useState(0); const [restart, setRestart] = React.useState(0); // Steps: // 0: prompt // 1: typing curl // 2: 402 response // 3: payment // 4: 200 response // 5: done React.useEffect(() => { const timers = []; timers.push(setTimeout(() => setStep(1), 600)); timers.push(setTimeout(() => setStep(2), 1900)); timers.push(setTimeout(() => setStep(3), 3300)); timers.push(setTimeout(() => setStep(4), 4600)); timers.push(setTimeout(() => setStep(5), 6200)); timers.push(setTimeout(() => setRestart((r) => r + 1), 11500)); return () => timers.forEach(clearTimeout); }, [restart]); const cmd = "curl -X POST https://api.weather-pro.dev/forecast"; const typedLen = step >= 2 ? cmd.length : step === 1 ? Math.min(cmd.length, Math.floor((Date.now() % 1300) / 1300 * cmd.length)) : 0; // Simpler: animate typing via state const [typed, setTyped] = React.useState(""); React.useEffect(() => { if (step !== 1) { if (step >= 2) setTyped(cmd); else setTyped(""); return; } let i = 0; const id = setInterval(() => { i++; setTyped(cmd.slice(0, i)); if (i >= cmd.length) clearInterval(id); }, 28); return () => clearInterval(id); }, [step, restart]); return (
~/extodan/demo · zsh live
$ {typed}{step === 1 && }
{step >= 2 && ( <>
{"< HTTP/1.1 "}402 Payment Required
{"< X-Payment-Required: "}$0.0010 USDC
{"< X-Payment-Network: "}base-mainnet
{"< X-Payment-Recipient: "}0x7a3e…b21f
)} {step >= 3 && (
# extodan-sdk: signing payment payload…
# settling on base-mainnet…
{step >= 4 &&
tx 0x9f1c…ae84 · confirmed · 412ms
}
)} {step >= 4 && ( <>
{"> X-Payment-Tx: "}0x9f1c…ae84
{"< HTTP/1.1 "}200 OK
{"< Content-Type: application/json"}
{"<"}
{`{ "lat": 37.78, "lon": -122.41, "forecast": [`}
{` { "t": "+0h", "tempC": 14, "cond": "clear" },`}
{` { "t": "+24h", "tempC": 16, "cond": "fog" },`}
{` { "t": "+48h", "tempC": 13, "cond": "rain" } ] }`}
)} {step >= 5 && (
# total cycle: 1 request, 1 payment, 1 response · 612ms
)} {step < 5 && step > 0 &&
}
); }; /* Hero variant 2 — annotated diagram */ const HeroDiagram = () => { return (
FIG.01
x402 / EXCHANGE
t=0ms → t=612ms
USDC · BASE
{/* Client node */} CLIENT agent · browser · curl wallet · 0x7a3e… {/* Server node */} SERVER api endpoint price · $0.0010 {/* Settlement node */} SETTLEMENT base · usdc ~412ms · 0.0001¢ gas {/* Arrows: req */} ① GET /resource {/* Arrows: 402 */} ② 402 Payment Required {/* Payment to settlement */} ③ signed payment {/* Settlement to server */} ④ confirmed {/* 200 response */} ⑤ 200 OK + payload {/* Tick marks */} {[0, 100, 200, 300, 400, 500, 612].map((t, i) => ( {t}ms ))} {/* Signal dot animation */}
); }; /* Hero variant 3 — editorial */ const HeroEditorial = () => (
Specification 0402
HTTP 402 Payment Required.{" "} Reserved in 1996. Implemented in 2025. The web's missing payment primitive, finally available to anyone with a server and anyone with a wallet.
$0.001
Min. settled payment
412ms
P50 settlement
0%
Account setup required
); const Hero = ({ variant = "terminal" }) => { return (

The x402
infrastructure
layer.

x402 turns any HTTP endpoint into a paid endpoint. No accounts. No credit cards. Payment happens inside the request, in milliseconds. Extodan is the marketplace, wallet, publishing, and protection infrastructure that makes it usable at scale.

Base mainnet · live USDC settlement HTTP-native SDK · TS / Py / Go
FIG.01 · {variant === "terminal" ? "EXCHANGE" : variant === "diagram" ? "PROTOCOL" : "SPEC.0402"}
{variant.toUpperCase()}
{variant === "terminal" && } {variant === "diagram" && } {variant === "editorial" && }
); }; Object.assign(window, { Hero, TerminalDemo, HeroDiagram, HeroEditorial });