// Shared Bloom site components: brand mark, nav, footer, hero illustrations. // Components are pushed to window for cross-file use. const BLOOM_MARK = ``; const Icon = ({ name, size = 16, stroke = 1.5, ...rest }) => ( ); const Mark = ({ size = 26 }) => ( ); /* ───────────── Announce ───────────── */ const Announce = () => (
DESIGN PARTNER PROGRAM · Q2 cohort · 4 of 6 spots remaining. Apply →
); /* ───────────── Nav ───────────── */ const Nav = ({ active = 'home' }) => (
); /* ───────────── Footer ───────────── */ const Footer = () => (
bloom

The AI inference economics control plane.

Visibility, routing, guardrails, and closed-loop evals — governed at the inference layer.

SOC 2 TYPE II HIPAA READY VPC OR SAAS
© 2026 Bloom Inc. · Backed by LG Nova · All systems operational v2.4.1 · build 8a3f9c2
); /* ───────────── Live counter hook ───────────── */ function useTicker(initial, step = 1, intervalMs = 1100, fmt = (n) => n.toLocaleString()) { const [n, setN] = React.useState(initial); React.useEffect(() => { const id = setInterval(() => { setN(prev => prev + (typeof step === 'function' ? step() : step)); }, intervalMs); return () => clearInterval(id); }, [intervalMs]); return fmt(n); } /* ───────────── Route diagram — clean three-column layout ───────────── */ const RouteDiagram = () => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick(t => (t + 1) % 3), 1800); return () => clearInterval(id); }, []); const providers = [ { y: 80, label: 'openai', region: 'us-east-1', p99: 62 }, { y: 200, label: 'anthropic', region: 'eu-west-1', p99: 87 }, { y: 320, label: 'together', region: 'us-west-2', p99: 94 }, ]; const COL_C = 70; // client x const COL_G = 280; // gateway x (center of box) const COL_P = 470; // provider box left x return ( {/* Column headers */} CLIENT ▸ BLOOM GATEWAY PROVIDERS {/* faint connection lines client → gateway, gateway → providers */} {providers.map((p, i) => ( ))} {/* Active highlighted route */} {(() => { const p = providers[tick]; return ( ); })()} {/* Client node */} your.app {/* Gateway: tall card, no overlap */} BLOOM gateway {/* mini pillar list */} 01 · observe 02 · route 03 · enforce 04 · score LIVE {/* Provider rows */} {providers.map((p, i) => { const active = i === tick; return ( {p.region.toUpperCase()} {p.label} · {p.p99}ms {active && } ); })} {/* SLO badge bottom-left under client */} SLO · p99 ≤100ms met ); }; /* ───────────── Topology · sphere of providers ───────────── */ const TopologyViz = () => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick(t => (t + 1) % 6), 1100); return () => clearInterval(id); }, []); const nodes = [ { x: 280, y: 60, label: 'openai', p: 62 }, { x: 460, y: 130, label: 'anthropic', p: 87 }, { x: 470, y: 290, label: 'gemini', p: 78 }, { x: 280, y: 360, label: 'together', p: 94 }, { x: 100, y: 290, label: 'fireworks', p: 71 }, { x: 90, y: 130, label: 'groq', p: 41 }, ]; return ( {/* spokes */} {nodes.map((n, i) => )} {/* concentric rings */} {/* highlighted spoke */} {(() => { const n = nodes[tick]; return ( ); })()} {/* hub */} ▸ BLOOM gateway {/* provider nodes */} {nodes.map((n, i) => { const active = i === tick; return ( {n.p} 210 ? 38 : -22)} textAnchor="middle" fontFamily="Geist" fontSize="13" fontWeight="500" fill="var(--ink)">{n.label} ); })} {/* counter chip top-right */} 2.14M req/min ); }; /* ───────────── Latency histogram + savings bars ───────────── */ const LatencyViz = () => { // simulate a histogram + a savings bar chart const buckets = [4, 9, 18, 32, 56, 78, 92, 86, 64, 38, 22, 12, 7, 4, 2]; const [pulse, setPulse] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setPulse(p => (p + 1) % 15), 280); return () => clearInterval(id); }, []); const max = Math.max(...buckets); const W = 560, H = 420; return ( {/* card */} {/* header */} LATENCY DISTRIBUTION · LAST 1H ▸ p99 87ms {/* y-axis ticks */} 100 75 50 25 {/* bars */} {buckets.map((b, i) => { const bw = (W - 100 - 32) / buckets.length; const x = 56 + i * bw + 2; const h = (b / max) * 200; const y = 300 - h; const isP99 = i === 11; return ( ); })} {/* x-axis line + p99 marker */} {(() => { const bw = (W - 100 - 32) / buckets.length; const px = 56 + 11 * bw + (bw - 4) / 2 + 2; return ( p99 ); })()} {/* x labels */} 0ms 100ms 300ms {/* footer chips */} CACHE HIT RATE 41% COST · LAST 1H $184 ↓41% REQ ROUTED 2.14M/min ); }; /* ───────────── Stack · architecture sandwich (typographic) ───────────── */ const StackViz = () => { const layers = [ { l: 'YOUR APP', sub: 'one URL change · one HTTP header', tone: 'paper' }, { l: '▸ BLOOM GATEWAY', sub: '01 observe · 02 route · 03 enforce · 04 score', tone: 'ink' }, { l: '1,000+ MODELS', sub: 'openai · anthropic · gemini · oss · vpc', tone: 'paper' }, ]; return ( {layers.map((ly, i) => { const y = 40 + i * 116; const ink = ly.tone === 'ink'; return ( LAYER {String(i+1).padStart(2,'0')} {ly.l} {ly.sub} {ink && ( LIVE )} ); })} {/* connector arrows between layers */} ); }; /* ───────────── Dashboard preview illustration ───────────── */ const DashboardViz = ({ compact = false } = {}) => { const PAD = compact ? 14 : 18; const ROW_PAD = compact ? '10px 4px' : '14px 4px'; const HSIZE = compact ? 22 : 30; const NAME_COL = compact ? '140px' : '170px'; const COST_COL = compact ? '88px' : '100px'; const TRAIL_COL = compact ? '60px' : '70px'; const ROW_FONT = compact ? 12 : 13; const BAR_H = compact ? 8 : 10; const customers = [ { name: 'Acme Robotics', cost: 28442, delta: -12, agents: [ { a: 'support-bot', c: 12428 }, { a: 'docs-search', c: 7964 }, { a: 'onboarding', c: 4551 }, { a: 'reports', c: 3499 }, ]}, { name: 'Northwind Health', cost: 19711, delta: -8, agents: [ { a: 'triage-agent', c: 11432 }, { a: 'intake-bot', c: 5322 }, { a: 'rx-lookup', c: 2957 }, ]}, { name: 'Globex Finance', cost: 14209, delta: 3, agents: [ { a: 'docs-search', c: 5826 }, { a: 'risk-copilot', c: 4831 }, { a: 'kyc-classify', c: 3552 }, ]}, { name: 'Stark Industries', cost: 9803, delta: -14, agents: [ { a: 'copilot', c: 6078 }, { a: 'spec-writer', c: 3725 }, ]}, { name: 'Initech', cost: 7124, delta: 2, agents: [ { a: 'chat-v2', c: 5058 }, { a: 'summarizer', c: 2066 }, ]}, ]; // Flatten across all customers, group by agent name, sort desc — for "by agent" view const agentMap = {}; customers.forEach(cust => { cust.agents.forEach(ag => { if (!agentMap[ag.a]) agentMap[ag.a] = { name: ag.a, cost: 0, customers: [] }; agentMap[ag.a].cost += ag.c; agentMap[ag.a].customers.push({ name: cust.name, c: ag.c }); }); }); const agents = Object.values(agentMap).sort((a, b) => b.cost - a.cost).slice(0, 6); const [view, setView] = React.useState('customer'); // 'customer' | 'agent' const total = useTicker(82371, () => Math.floor(Math.random() * 9) + 1, 1500, n => '$' + n.toLocaleString()); const custMax = customers[0].cost; const agentMax = agents[0].cost; return (
Spend · {view === 'customer' ? 'by customer' : 'by agent'} · last 24h
{total}
LIVE
{/* column headers */}
{view === 'customer' ? 'Customer' : 'Agent'}
Share of spend
Cost
{view === 'customer' ? 'Δ vs avg' : 'Customers'}
{/* rows — keyed on view so React mounts a fresh set; CSS handles enter animation */}
{(view === 'customer' ? customers : agents).map((r, i) => { const cost = r.cost; const max = view === 'customer' ? custMax : agentMax; const widthPct = (cost / max) * 100; const trail = view === 'customer' ? (
{r.delta < 0 ? '↓' : '↑'} {Math.abs(r.delta)}%
) : (
{r.customers.length}
); return (
{r.name}
${cost.toLocaleString()}
{trail}
); })}
{view === 'customer' ? '5 of 247 customers' : '6 of 14 agents'} · attributed via x-customer-id updated just now
); }; /* ───────────── Flow viz (request → gateway → response) ───────────── */ const FlowViz = () => { const reqId = useTicker(8412091, 1, 900, n => 'req_' + n.toString(16)); const lat = useTicker(180, () => Math.floor(Math.random() * 12) - 6, 1200, n => Math.max(140, Math.min(220, n)) + 'ms'); const lines = [ { t: '00.000', e: 'POST /v1/chat/completions', c: 'k' }, { t: '00.002', e: 'auth · x-customer-id=acme_42', c: 'g' }, { t: '00.004', e: 'cache lookup · semantic miss', c: 'g' }, { t: '00.008', e: 'route → us-east-1 · openai', c: 'k' }, { t: '00.142', e: 'guardrails · pii redacted (1)', c: 'g' }, { t: '00.183', e: 'eval · score 0.94 · ok', c: 'g' }, { t: '00.187', e: 'response 200 · 412 tok · $0.0021', c: 'k' }, ]; return (
TRACE · {reqId}
{lat}
{lines.map((l, i) => (
{l.t} {l.e}
))}
cache: miss · route: us-east-1 · tokens: 412 · cost: $0.0021
); }; window.Mark = Mark; window.Icon = Icon; window.Announce = Announce; window.SiteNav = Nav; window.SiteFooter = Footer; window.RouteDiagram = RouteDiagram; window.DashboardViz = DashboardViz; window.FlowViz = FlowViz; window.TopologyViz = TopologyViz; window.LatencyViz = LatencyViz; window.StackViz = StackViz; window.useTicker = useTicker;