// The Printing Press — a mechanical press that prints the 6 primitives onto // a sheet of paper as you scroll. // // Staging: // - Tall sticky section. 0→1 scroll progress drives the whole sequence. // - The press sits centered; the paper feeds from the right, travels under // the platen, gets stamped once per primitive (6 strikes), then exits left. // - Each strike: platen slams down, paper wobbles, ink splatter puffs, a // carved "plate" lifts off revealing a newly printed panel on the sheet. // - Ambient: rollers rotate, gears spin, shadow under press shifts with the // strike. Metal carriage recoils. // // Built in CSS/SVG — no Three.js needed. All timing comes from scroll progress. const { useEffect: useEffP, useRef: useRefP, useState: useStateP } = React; const PRIMS = [ { n: "01", name: "MEMORY", body: "A shared semantic substrate.", glyph: "◐" }, { n: "02", name: "FLEET", body: "Many agents, one intent.", glyph: "▲" }, { n: "03", name: "TOOL", body: "Any API, typed end-to-end.", glyph: "⌬" }, { n: "04", name: "TRACE", body: "Every decision, replayable.", glyph: "→" }, { n: "05", name: "STREAM", body: "Real-time throughput, guaranteed.", glyph: "~" }, { n: "06", name: "POLICY", body: "Guardrails, signed and audited.", glyph: "✕" }, ]; function PrintingPress() { const ref = useRefP(null); const [p, setP] = useStateP(0); // 0..1 useEffP(() => { const onScroll = () => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const total = el.offsetHeight - window.innerHeight; const scrolled = -rect.top; setP(Math.max(0, Math.min(1, scrolled / total))); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); const TOTAL_VH = 100 + PRIMS.length * 80 + 60; // room for intro, 6 strikes, outro // ── Scene math ── // Divide scroll into: intro (0-0.08) → 6 strikes (0.08-0.92) → outro (0.92-1) const intro = Math.min(1, p / 0.08); const outro = Math.max(0, (p - 0.92) / 0.08); const stampZone = Math.max(0, Math.min(1, (p - 0.08) / 0.84)); const stampFloat = stampZone * PRIMS.length; // 0..6 // Per strike cycle: 0..1 within one strike const currentStrikeIdx = Math.min(PRIMS.length - 1, Math.floor(stampFloat)); const strikeLocal = stampFloat - currentStrikeIdx; // 0..1 within strike // Paper X: moves left-to-right as stampFloat advances; each strike the paper // shifts one panel-width further. Panels are printed onto paper at fixed positions. // We move the paper through screen so the strike zone (center) lines up with the // current panel slot. // paperX: 0 means first panel centered; grows negative as paper moves left. const PANEL_W = 200; // px per panel on paper const paperX = -stampFloat * PANEL_W; // Platen (press head) Y: slams down on strike // Strike cycle: 0..0.3 descend, 0.3..0.45 hold, 0.45..0.7 rise, 0.7..1 idle let platenY = 0; let stampIntensity = 0; // 0..1 how deep in the strike we are if (strikeLocal < 0.3) { platenY = ease(strikeLocal / 0.3) * 70; // descend stampIntensity = strikeLocal / 0.3; } else if (strikeLocal < 0.45) { platenY = 70; stampIntensity = 1; // held } else if (strikeLocal < 0.7) { platenY = 70 - ease((strikeLocal - 0.45) / 0.25) * 70; stampIntensity = 1 - (strikeLocal - 0.45) / 0.25; } else { platenY = 0; stampIntensity = 0; } // Paper wobble: a tiny vertical shake during strike const paperShake = strikeLocal < 0.5 && strikeLocal > 0.25 ? Math.sin(strikeLocal * 60) * 1.5 : 0; // Roller rotation: continuous based on paper position const rollerRot = -paperX * 0.9; // Hide press during outro const pressOpacity = 1 - Math.max(0, (p - 0.95) / 0.05); return (
{/* Sticky stage */}
{/* Section head */}
§ III  ·  THE PRESS
PLATE{" "} {String(Math.min(PRIMS.length, currentStrikeIdx + 1)).padStart(2, "0")} {" "}/ {String(PRIMS.length).padStart(2, "0")}
{/* Headline — fades as first strike begins */}

Six primitives,
printed into one agent.

↓ KEEP SCROLLING · THE PRESS BEGINS

{/* THE PRESS — centered stage */}
{/* Overhead beam + gears (press frame top) */} {/* Platen (the stamp head that slams down) */}
{/* Plate on platen face — shows current primitive as engraved type */}
{/* Engraved (mirrored) text — bronze */} {PRIMS[currentStrikeIdx].name} № {PRIMS[currentStrikeIdx].n}
{/* Rivets */}
{/* Piston/connecting rod */}
{/* PAPER — travels right-to-left through the press */}
{/* Leading edge ticket perforations */}
JAS · STOCK
{/* Panels — each gets printed once its strike passes */} {PRIMS.map((pr, i) => { // printed = true when we've finished striking it const printed = stampFloat > i + 0.45; const currentlyBeing = i === currentStrikeIdx && strikeLocal > 0.25 && strikeLocal < 0.7; return (
{printed || currentlyBeing ? (
№ {pr.n}
{pr.name}
{pr.body}
{/* small glyph stamp */}
{pr.glyph}
) : (
— BLANK —
)}
); })} {/* Trailing edge */}
END OF RUN
{/* Ink splatter overlay on current strike */} {stampIntensity > 0.6 && (
{[...Array(10)].map((_, i) => { const a = (i / 10) * Math.PI * 2; const r = 20 + (i % 3) * 14; return ( ); })}
)}
{/* Rollers (lower, paper passes over them) */} {/* Press base / floor */}
{/* Feet */}
{/* Nameplate on side of press */}
JAS · CO. · 2026
{/* Strike clang — big letters that appear and fade each strike */} {stampIntensity > 0.7 && (
CLANG!
)}
{/* Bottom bar — progress ticks */}
↓ scroll to run the press
{PRIMS.map((_, i) => ( i + 0.5 ? 28 : 10, height: 3, background: i <= currentStrikeIdx && stampFloat > i + 0.5 ? "var(--stamp)" : "var(--rule-strong)", transition: "all 0.25s", }}/> ))}
); } // ──────── Helpers ──────── function ease(t) { // easeInOutCubic return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } function Rivet({ style }) { return ( ); } function Frame({ rollerRot }) { // Top beam + two columns + gears on either end return ( <> {/* Top beam */}
{/* JAS logo embossed on beam */}
JAS  ·  CO.
{/* Left column */}
{/* Right column */}
{/* Gears */} ); } function Gear({ style, size, rot }) { const teeth = 12; return (
{[...Array(teeth)].map((_, i) => { const a = (i / teeth) * 360; return ( ); })} {/* Spokes */} {[0, 60, 120].map(a => ( ))}
); } function Roller({ style, rot }) { const size = 60; return (
{[0, 45, 90, 135].map(a => ( ))}
); } function Foot({ style }) { return (
); } window.PrintingPress = PrintingPress;