/* Protocol explainer — animated as scrolled */ const Protocol = () => { const ref = React.useRef(null); const p = useScrollProgress(ref); // 4 stages: 0=request, 1=402, 2=payment, 3=200 const stage = p < 0.18 ? 0 : p < 0.42 ? 1 : p < 0.68 ? 2 : 3; const steps = [ { n: "01", label: "Request", title: "An HTTP request hits a paid endpoint.", body: "The server doesn't care who you are. No API key. No login. Just a request for the resource.", code: "GET /forecast HTTP/1.1\nHost: api.weather-pro.dev", }, { n: "02", label: "402 Payment Required", title: "The server replies with the price.", body: "Instead of 200 OK, it returns 402 with payment terms — recipient address, amount, network, and a one-time challenge.", code: "HTTP/1.1 402 Payment Required\nX-Payment-Required: 0.0010 USDC\nX-Payment-Network: base-mainnet\nX-Payment-Recipient: 0x7a3e…b21f", }, { n: "03", label: "Settlement", title: "The client signs and pays inline.", body: "An SDK or wallet signs a payment payload and submits it. USDC moves on Base. There's no checkout page, no redirect, no human.", code: "POST /forecast HTTP/1.1\nX-Payment-Tx: 0x9f1c…ae84\nX-Payment-Network: base-mainnet", }, { n: "04", label: "200 OK", title: "The response returns. Cycle complete.", body: "Total elapsed: ~600ms. The request, the payment, the response — all on the same connection. No accounts were created. No invoices were generated.", code: "HTTP/1.1 200 OK\nContent-Type: application/json\n\n{ \"forecast\": [ … ] }", }, ]; return (
{/* LEFT: sticky header + stage list */}

How the
request gets paid.

The whole exchange happens at the protocol level. No checkout flow. No redirect. The payment is a header.

    {steps.map((s, i) => (
  • = i ? 1 : 0.32, transition: "opacity 0.4s" }}> {s.n} = i ? "var(--fg)" : "var(--fg-dim)", letterSpacing: "-0.012em" }}>{s.label} {stage === i ? active : stage > i ? "✓ done" : "—"}
    • ))}
{/* RIGHT: animated diagram */}
FIG.02
STAGE {String(stage + 1).padStart(2, "0")}/04
{steps[stage].label.toUpperCase()}
p={p.toFixed(2)}
{/* Boxes */} CLIENT ai agent · curl · browser balance: 12.4 USDC SERVER api.weather-pro.dev price: $0.0010 / call = 2 ? 1 : 0.3}> SETTLEMENT base · usdc finality ~412ms {/* Arrow stage 0: GET */} GET /forecast {/* Stage 1: 402 */} 1 ? 0.4 : 0.18}> 402 PAYMENT REQUIRED {/* Stage 2: payment leg */} 2 ? 0.4 : 0.18}> SIGN + PAY CONFIRM {/* Stage 3: 200 */} 200 OK + JSON {/* Signal dot for current stage */} {stage === 0 && } {stage === 1 && } {stage === 2 && } {stage === 3 && }
{/* Code excerpt panel */}
wire format · {steps[stage].label} 
{steps[stage].code}
{/* Vertical scroll indicator */}
↓ scroll to advance
); }; Object.assign(window, { Protocol });