// repram-components.jsx — REPRAM landing page sections
// Aligned with wshoffner.dev design system.
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR, useMemo: useMemoR } = React;
// =============================================================================
// Shared glyph atoms
// =============================================================================
function Glyph({ children, color = '#22d3ee' }) {
return {children} ;
}
function TerminalFrame({ label, children, style }) {
return (
);
}
// =============================================================================
// Top navigation — WesOS chrome style
// =============================================================================
function SiteNav() {
return (
);
}
function NavLink({ href, children }) {
return (
e.currentTarget.style.color = '#39ff14'}
onMouseLeave={(e) => e.currentTarget.style.color = '#8b949e'}>
{children} );
}
// =============================================================================
// Hero — ASCII banner + tagline + boot sequence
// =============================================================================
const BOOT_LINES = [
{ tag: 'BOOT', color: '#39ff14', text: 'initializing ephemeral storage layer...' },
{ tag: 'NET', color: '#22d3ee', text: 'gossip protocol online · quorum=3' },
{ tag: 'SYS', color: '#facc15', text: 'mandatory TTL enforced · min=300s max=86400s' },
{ tag: 'AUTH', color: '#e040fb', text: 'no accounts · no keys · no logs' },
{ tag: 'BOOT', color: '#39ff14', text: 'network ready. data will expire.' }];
function Hero() {
const [visibleLines, setVisibleLines] = useStateR(0);
useEffectR(() => {
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) {setVisibleLines(BOOT_LINES.length);return;}
let i = 0;
const t = setInterval(() => {
i++;
setVisibleLines(i);
if (i >= BOOT_LINES.length) clearInterval(t);
}, 220);
return () => clearInterval(t);
}, []);
return (
// NET://REPRAM.IO
NETWORK LIVE
REPRAM
ephemeral coordination layer for the agent web.
a distributed dead-drop network where data self-destructs on a timer.
agents leave payloads, other agents pick them up, and the network cleans itself.
nobody signs a guest book.
{BOOT_LINES.slice(0, visibleLines).map((l, i) =>
[{l.tag}]
{l.text}
)}
{visibleLines < BOOT_LINES.length &&
}
{visibleLines >= BOOT_LINES.length &&
guest@repram
:
~
$
docker run -p 8080:8080 ticktockbent/repram-node
}
> run a node
@ github
$ npm install repram-mcp
# whitepaper
);
}
function LiveDot() {
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
color: base.color,
background: base.bg,
border: `1px solid ${base.border}`,
padding: '10px 16px', fontSize: 13, letterSpacing: '0.08em',
textTransform: 'lowercase',
fontFamily: 'var(--font-mono)',
boxShadow: hover && !primary ? '0 0 8px #39ff1430, inset 0 0 8px #39ff1410' : 'none',
transition: 'all 0.2s'
}}>{children} );
}
// =============================================================================
// What-it-is / what-it-is-NOT split
// =============================================================================
function WhatItIs() {
return (
// IS://
temporary, replicated, self-cleaning storage
a dead-drop rendezvous for agents who don't know each other
general-purpose — "pipe, not grep"
boring in the best way · boots in one docker command
// IS NOT://
a database — data is guaranteed to disappear
a message queue — "leave it and hope they check"
a secrets vault — no access control, no encryption
a cache with eviction — only TTL, never memory pressure
);
}
function LiGood({ children }) {
return
>
{children}
;
}
function LiBad({ children }) {
return
×
{children}
;
}
// =============================================================================
// Architecture — ASCII network diagram
// =============================================================================
function NetworkDiagram() {
// viewBox: 800 wide × 440 tall. Scales to any container.
const G = '#39ff14'; // primary / identity
const C = '#22d3ee'; // structure
const M = '#e040fb'; // live / interaction
const MUTED = '#8b949e';
const BODY = '#b8c0cc';
const BG = '#0d1117';
// box helpers
const Box = ({ x, y, w, h, color, children, labelTop }) =>
{labelTop}
}
{children}
;
return (
{/* ===== Agents ===== */}
AGENT · A
"leaves it"
— the writer —
AGENT · B
"picks it up"
— the reader —
{/* ===== Agent → cluster arrows ===== */}
{/* A: PUT */}
PUT
/v1/data/{'{'}key{'}'}
X-TTL: 300
{/* B: GET */}
GET
/v1/data/{'{'}key{'}'}
→ 200 "payload"
{/* ===== Enclave container ===== */}
REPRAM://ENCLAVE
{/* ===== Three nodes ===== */}
{[
{ cx: 180, label: 'NODE·01' },
{ cx: 400, label: 'NODE·02' },
{ cx: 620, label: 'NODE·03' }].
map((n, i) =>
{n.label}
in-memory · opaque
TTL enforced
{/* liveness dot */}
)}
{/* ===== Gossip connectors ===== */}
{[
{ x1: 232, x2: 348, label: 'gossip', cx: 290 },
{ x1: 452, x2: 568, label: 'gossip', cx: 510 }].
map((g, i) =>
{g.label}
{/* pulse traveling along the line */}
)}
{/* wrap-around gossip hint: node3 ↔ node1 */}
gossip
{/* ===== TTL timeline ===== */}
// TTL://TIMELINE
{/* axis */}
{tk.label}
{tk.sub}
)}
);
}
function Architecture() {
return (
how it works
~ mandatory TTL│
@ gossip replication, quorum=3│
# zero-knowledge nodes│
$ loosely coupled · no catch-up
);
}
function Principle({ glyph, label, children, color = '#39ff14' }) {
return (
{glyph} {label}
{children}
);
}
// =============================================================================
// Patterns — agent usage patterns as terminal cards
// =============================================================================
const PATTERNS = [
{
name: 'dead drop',
tag: '[CORE]', tagColor: '#39ff14',
desc: 'Agent A stores a payload under a derived key. Agent B computes the same key, retrieves, payload self-destructs after TTL.',
code: `A: PUT /v1/data/hash(task+pair) X-TTL:300\nB: GET /v1/data/hash(task+pair)\n → 200 "payload"\n ... 300s later ...\n → 404`
},
{
name: 'scratchpad',
tag: '[STATE]', tagColor: '#22d3ee',
desc: 'An agent persists intermediate reasoning across multi-step workflows. Store, retrieve, update, let expire.',
code: `PUT /v1/data/job/42/scratch X-TTL:600\nGET /v1/data/job/42/scratch\nPUT /v1/data/job/42/scratch # overwrite`
},
{
name: 'coordination token',
tag: '[LOCK]', tagColor: '#e040fb',
desc: 'A shared key acts as a lightweight distributed lock. Presence = in progress. Expiration = available.',
code: `HEAD /v1/data/lock/resource-9\n → 200 "held"\n → 404 "free — go ahead"`
},
{
name: 'heartbeat',
tag: '[LIVE]', tagColor: '#39ff14',
desc: 'Write on interval with short TTL. Key exists = alive. Key expires = failure detected. The TTL is the failure detector.',
code: `loop {\n PUT /v1/data/svc/api/heartbeat X-TTL:30\n sleep 10s\n}`
},
{
name: 'state machine',
tag: '[FSM]', tagColor: '#22d3ee',
desc: 'A job-id key transitions through states via overwrites. TTL guarantees staleness: if the writer crashes, the key expires.',
code: `PUT job/42 queued X-TTL:600\nPUT job/42 in_progress X-TTL:600\nPUT job/42 complete X-TTL:600`
},
{
name: 'presence broadcast',
tag: '[NET]', tagColor: '#e040fb',
desc: 'N-way ephemeral notification. Each node writes; all readers list with prefix and process whatever exists right now.',
code: `PUT /v1/data/room/42/alice\nGET /v1/keys?prefix=room/42/\n → ["alice","bob","charlotte"]`
}];
function Patterns() {
return (
six ways agents use REPRAM
the primitive is general-purpose. the primitive is also pipe, not grep.
);
}
function PatternCard({ name, tag, tagColor, desc, code }) {
const [hover, setHover] = useStateR(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
border: `1px solid ${hover ? '#39ff1480' : '#22d3ee33'}`,
boxShadow: hover ? '0 0 8px #39ff1430, inset 0 0 8px #39ff1410' : 'none',
padding: '18px 20px 16px',
transition: 'all 0.2s',
background: '#0a0a0fcc'
}}>
{name}
{tag}
{desc}
{code}
);
}
// =============================================================================
// Interactive TTL playground
// =============================================================================
function TTLDemo() {
const [entries, setEntries] = useStateR([]);
const [now, setNow] = useStateR(Date.now());
const [key, setKey] = useStateR('mykey');
const [val, setVal] = useStateR('hello');
const [ttl, setTtl] = useStateR(10);
useEffectR(() => {
const t = setInterval(() => setNow(Date.now()), 250);
return () => clearInterval(t);
}, []);
const live = useMemoR(() =>
entries.filter((e) => e.expiresAt > now), [entries, now]);
const store = () => {
if (!key.trim()) return;
setEntries((prev) => [
...prev.filter((e) => e.key !== key),
{ key, val, createdAt: Date.now(), expiresAt: Date.now() + ttl * 1000 }]
);
};
return (
watch data expire
write a key. set a TTL. watch it vanish. this is simulated client-side; the real thing does this across a gossip cluster.
network state
{live.length === 0 &&
guest@repram
:
~
$
// the network is empty. it forgot everything.
}
{live.map((e) => {
const remainingMs = Math.max(0, e.expiresAt - now);
const pct = Math.max(0, Math.min(1, remainingMs / (e.expiresAt - e.createdAt)));
const danger = remainingMs < 3000;
return (
{e.key}
=
"{e.val}"
{(remainingMs / 1000).toFixed(1)}s
);
})}
[SYS] expired keys are
irretrievably destroyed. the network keeps no memory of what it forgot.
);
}
function FieldLabel({ children }) {
return // {children}
;
}
function TermInput({ value, onChange, placeholder }) {
return (
quickstart
pick your interface. everything below talks to the same network.
{QUICKSTART_TABS.map((t) =>
setTab(t.id)}
style={{
background: tab === t.id ? '#161b22' : 'transparent',
border: 'none',
borderTop: `1px solid ${tab === t.id ? '#22d3ee99' : 'transparent'}`,
borderLeft: `1px solid ${tab === t.id ? '#22d3ee33' : 'transparent'}`,
borderRight: `1px solid ${tab === t.id ? '#22d3ee33' : 'transparent'}`,
borderBottom: `1px solid ${tab === t.id ? '#161b22' : 'transparent'}`,
marginBottom: -1,
color: tab === t.id ? '#39ff14' : '#8b949e',
textShadow: tab === t.id ? '0 0 8px #39ff1460' : 'none',
padding: '10px 16px', fontSize: 13,
letterSpacing: '0.08em', fontFamily: 'var(--font-mono)',
cursor: 'pointer',
transition: 'all 0.2s'
}}>
{t.glyph} {t.label}
)}
{copied ? 'COPIED' : 'COPY'}
{current.code}
);
}
// =============================================================================
// API reference — compact endpoint table
// =============================================================================
const ENDPOINTS = [
{ method: 'PUT', path: '/v1/data/{key}', desc: 'store bytes under key with X-TTL header',
returns: '201 Created · 202 Accepted', color: '#39ff14' },
{ method: 'GET', path: '/v1/data/{key}', desc: 'retrieve bytes (or 404 if expired)',
returns: '200 · 404', color: '#22d3ee' },
{ method: 'HEAD', path: '/v1/data/{key}', desc: 'existence check without body — for heartbeats',
returns: '200 · 404', color: '#22d3ee' },
{ method: 'GET', path: '/v1/keys', desc: 'list keys · supports ?prefix, ?limit, ?cursor',
returns: '200 · {keys, next_cursor?}', color: '#22d3ee' },
{ method: 'GET', path: '/v1/health', desc: 'node liveness',
returns: '200 {status, node_id, network}', color: '#8b949e' },
{ method: 'GET', path: '/v1/status', desc: 'detailed status — uptime, memory',
returns: '200 {…}', color: '#8b949e' },
{ method: 'GET', path: '/v1/topology', desc: 'peer list with enclave membership',
returns: '200 {peers:[…]}', color: '#8b949e' },
{ method: 'GET', path: '/v1/metrics', desc: 'prometheus-format metrics',
returns: '200 text/plain', color: '#8b949e' }];
function ApiReference() {
return (
API reference
ten endpoints. no auth. no versioning surprises. bytes in, bytes out.
method path description returns
{ENDPOINTS.map((e, i) =>
{e.method}
{e.path}
{e.desc}
{e.returns}
)}
);
}
// =============================================================================
// Footer — neofetch-style
// =============================================================================
const NEOFETCH_ASCII = String.raw`
:::::::::::
::::r::e::p::: guest@repram
:::r::a::m::::. -------------
:::::::::::::: OS: REPRAM v2.0
::::::::::::. Kernel: gossip/quorum=3
:::::::::: Uptime: ephemeral
::::::::. Shell: dead-drop
:::::: Memory: configurable · TTL-bounded
`;
function Footer() {
return (
);
}
function FooterLink({ glyph, label, href }) {
return (
{
e.currentTarget.style.color = '#39ff14';
e.currentTarget.style.textShadow = '0 0 8px #39ff1460';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '#8b949e';
e.currentTarget.style.textShadow = 'none';
}}>
{glyph} {label}
);
}
Object.assign(window, {
SiteNav, Hero, WhatItIs, Architecture, Patterns,
TTLDemo, Quickstart, ApiReference, Footer
});