/* global React, window */ const { useRef: useRefS, useState: useStateS, useEffect: useEffectS } = React; const useRevealS = window.useReveal; const ArrowRightS = window.ArrowRight; /* ── shared bits ── */ function Eyebrow({ index, children, dark = false }) { return (
{index} {children}
); } /* ── [02] THE GAP ── */ function TheGap() { const [ref, inView] = useRevealS({ threshold: 0.25 }); const points = [ ["No witness", "An agent approves a payment, rebalances a treasury, ships a contract — and the only trace is a log file it could rewrite itself."], ["No proof", "When something goes wrong, \u201Ctrust me\u201D is not an answer. There is no record an auditor, a regulator, or a counterparty can independently verify."], ["No memory", "Decisions evaporate the moment they\u2019re made. The chain of reasoning that mattered most is the first thing lost."], ]; return (
The Gap

Agents act
in the dark.

Autonomous software now makes irreversible decisions at machine speed. The infrastructure to answer what it did, and why never came with it.

{points.map((p, i) => (
0{i + 1}

{p[0]}

{p[1]}

))}
); } /* ── [03] MODULES ── */ function Modules() { const [ref, inView] = useRevealS({ threshold: 0.18 }); const mods = [ { num: "I", part: "The Escapement", title: "Capture", body: "A lightweight hook sits beside your agent and meters every decision at the instant it is made — the intent, the inputs it weighed, the action it took.", meta: "SDK · 4 lines", }, { num: "II", part: "The Barrel", title: "Anchor", body: "Each decision is hashed, sealed into an attestation, and written to Casper mainnet. No edits, no deletions — wound tight and held under tension, forever.", meta: "On-chain · immutable", }, { num: "III", part: "The Balance", title: "Prove", body: "Query, replay, and cryptographically verify any past decision. Hand a counterparty a link, not a promise. The record keeps perfect time.", meta: "Verifiable · public", }, ]; return (
Modules

Three movements,
one mechanism.

Mainspring is built like a watch — discrete parts that only mean something when they turn together.

{mods.map((m, i) => (
{m.num} {m.meta}
{m.part}

{m.title}

{m.body}

))}
); } /* ── [04] THE LOOP (parchment / clockface) ── */ function TheLoop() { const [ref, inView] = useRevealS({ threshold: 0.2 }); // 4 stations at 12 / 3 / 6 / 9 const stations = [ { pos: "top", n: "I", label: "Act", desc: "Your agent decides." }, { pos: "right", n: "II", label: "Witness", desc: "Mainspring meters it." }, { pos: "bottom", n: "III", label: "Anchor", desc: "Sealed to Casper." }, { pos: "left", n: "IV", label: "Prove", desc: "Anyone can verify." }, ]; const place = { top: { top: "-2%", left: "50%", transform: "translate(-50%,-50%)", align: "center" }, right: { top: "50%", left: "100%", transform: "translate(-50%,-50%)", align: "left" }, bottom: { top: "102%", left: "50%", transform: "translate(-50%,-50%)", align: "center" }, left: { top: "50%", left: "0%", transform: "translate(-50%,-50%)", align: "right" }, }; return (
The Loop

Every decision runs the same clock.

Four movements, turning continuously — from the moment an agent acts to the moment a stranger can prove it.

{/* clockface diagram */}
{/* ring */}
{/* tick marks */} {Array.from({ length: 12 }).map((_, i) => ( ))} {/* center watch */}
The Loop
{/* stations */} {stations.map((s) => { const p = place[s.pos]; return (
{s.n}
{s.label}
{s.desc}
); })}

↻ continuous · tamper-evident · always-on

); } /* ── [05] THE PROOF ── */ function TheProof() { const [ref, inView] = useRevealS({ threshold: 0.18 }); const TX = "91fb904e47b600b0a9e4f6571a3412c83187000e9ceab19ba26cc23fabec555c"; const rows = [ ["anchor_tx", TX.slice(0,8) + "\u2026" + TX.slice(-6)], ["agent", "mainspring-witness"], ["action", "ANCHOR memory hash to Casper testnet"], ["content", "sha256:" + TX.slice(0,8) + "\u2026" + TX.slice(-8) + " (sealed)"], ["network", "Casper testnet"], ["sealed_at", "2026-06-06 UTC"], ]; return (
The Proof
{/* engraving on parchment panel */}
Mr. Mainspring, the on-chain witness
Exhibit A — the witness
{/* claim + receipt */}

“Trust me” becomes
a receipt.

Every decision your agent makes resolves into a permanent, queryable, independently verifiable record on Casper mainnet. Here is one.

Attestation · Casper Testnet Immutable
{rows.map((r) => (
{r[0]} {r[1]}
))}
); } /* ── [06] REPO / CTA ── */ function Repo() { const [ref, inView] = useRevealS({ threshold: 0.2 }); const [copied, setCopied] = useStateS(false); const cmd = "npm i mainspring"; const copy = () => { try { navigator.clipboard.writeText(cmd); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 900); }; return (
Repo

Wind it up.

Four lines to give your agent a witness. Open source, Casper-native, free to verify forever.

View the repo Read the docs
LIVE ON CASPER MAINNET
); } /* ── FOOTER ── */ const FOOTER_LINKS = { "The Gap": "#gap", "Modules": "#modules", "The Loop": "#loop", "The Proof": "#proof", "Documentation": "Documentation.html", "SDK reference": "Documentation.html#capture", "Repository": "https://github.com/Micoh18/Mr-Mainspring", "Changelog": "#", "Casper Mainnet": "https://cspr.live", "Block explorer": "https://cspr.live", "Status": "#", "Verify a record": "https://cspr.live", }; function Footer() { const cols = [ ["Product", ["The Gap", "Modules", "The Loop", "The Proof"]], ["Develop", ["Documentation", "SDK reference", "Repository", "Changelog"]], ["Network", ["Casper Mainnet", "Block explorer", "Status", "Verify a record"]], ]; return ( ); } Object.assign(window, { TheGap, Modules, TheLoop, TheProof, Repo, Footer });