/* BifferProxy homepage — main app */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- Icons (inline SVG, 1.5px stroke, lucide-style) ---------- */ const I = { user: , shield: , scan: , tag: , server: , cpu: , log: , globe: , lock: , link: , arrow: , check: , play: , }; window.I = I; /* ---------- Problem section ---------- */ const Problem = () => { useReveal(); return (
01 · The stakes

Your people are already pasting secrets into chatbots.

Every LLM request is an exfiltration vector. You can block the tools, or you can let them work — safely.

 in 

Employees have pasted sensitive data into an LLM.

Names, IBANs, M&A codenames, customer PII, internal URLs. The logs are elsewhere now.

€M

Maximum fine under the EU AI Act.

7% of global turnover for prohibited processing. Your auditors are asking already.

Prompts are memorized.
Models leak.

Vendor policies shift. Logs are human-reviewed. Redaction at source is the only durable control.

anim · counters tick on enter · 1400ms cubic-ease · stagger 80ms
); }; /* ---------- How it works — horizontal scroll ---------- */ const FLOW = [ { icn: I.user, kind: '', label: 'USER / AGENT', title: 'Employee or agent', desc: 'Sends a normal request to any OpenAI-compatible endpoint.', lat: 'client · <1 ms' }, { icn: I.shield, kind: 'accent', label: 'BIFFERPROXY', title: 'The proxy intercepts', desc: 'Deployed inside your perimeter. Nothing leaves yet.', lat: 'intake · 2 ms' }, { icn: I.scan, kind: '', label: 'DETECT', title: 'Regex + NER scan', desc: 'Two-layer detector finds 11 entity types with confidence scores.', lat: '6–14 ms' }, { icn: I.tag, kind: 'accent', label: 'PSEUDONYMIZE', title: 'Replace spans with tokens', desc: 'Deterministic per session. Same entity → same token.', lat: '<1 ms' }, { icn: I.cpu, kind: '', label: 'UPSTREAM LLM', title: 'Sent to the model', desc: 'OpenAI, Anthropic, Mistral, Gemini, Bedrock, Azure — unchanged API.', lat: '80–200 ms' }, { icn: I.shield, kind: 'accent', label: 'DE-PSEUDONYMIZE', title: 'Restore tokens inline',desc: 'Session-aware reverse map. Tokens swap back to originals.', lat: '<1 ms' }, { icn: I.user, kind: '', label: 'USER / AGENT', title: 'Clean response', desc: 'Your client sees exactly what it expected. Plus an audit entry.', lat: 'delivered · invisible' }, ]; const Flow = () => { const secRef = useRef(null); const trackRef = useRef(null); const [progress, setProgress] = useState(0); const [maxShift, setMaxShift] = useState(0); useEffect(() => { const sec = secRef.current; const track = trackRef.current; if (!sec || !track) return; const recalc = () => { const w = track.scrollWidth; const viewW = window.innerWidth; setMaxShift(Math.max(0, w - viewW + 64)); }; recalc(); window.addEventListener('resize', recalc); const onScroll = () => { const r = sec.getBoundingClientRect(); const vh = window.innerHeight; // progress: 0 when top enters, 1 when bottom sub-viewport approaches const total = r.height - vh; if (total <= 0) return; const scrolled = Math.min(total, Math.max(0, -r.top)); setProgress(scrolled / total); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', recalc); }; }, []); const shift = -progress * maxShift; const pct = Math.round(progress * 100); return (
02 · How it works

A single hop between your clients and any LLM.

Scroll to walk through one round-trip. Every node runs on your infra. No data ever reaches a third-party model in the clear.

{FLOW.map((n, i) => (
0{i+1} — {n.label}
{n.icn}

{n.title}

{n.desc}

latency · {n.lat}
{i < FLOW.length - 1 && (
)} ))}
request
{pct.toString().padStart(2,'0')}% · node {Math.min(FLOW.length, 1+Math.floor(progress*FLOW.length))}/{FLOW.length}
anim · section pins 340vh · track translates X · data packets flow on scroll
); }; /* ---------- Side-by-side demo ---------- */ const SAMPLES = { legal: { left: `Team — attached is the draft SPA for the acquisition of Corvex Medical by Helios Diagnostics, target close 18 June 2026. Key contacts: Marie Dupont (Helios Legal, marie.dupont@helios.eu, +33 6 12 34 56 78) and Ahmed El-Sayed at Corvex (a.elsayed@corvex-med.com). Wire the signing escrow — €18,400,000 — to IBAN FR7630001007941234567890185 by Thursday. The data room is at https://vdr.helios.eu/corvex-2026.`, entities: [ ['Corvex Medical','[ORG_1]','ORGANIZATION'], ['Helios Diagnostics','[ORG_2]','ORGANIZATION'], ['18 June 2026','[DATE_1]','DATE_TIME'], ['Marie Dupont','[PERSON_1]','PERSON'], ['marie.dupont@helios.eu','[EMAIL_1]','EMAIL_ADDRESS'], ['+33 6 12 34 56 78','[PHONE_1]','PHONE_NUMBER'], ['Ahmed El-Sayed','[PERSON_2]','PERSON'], ['Corvex','[ORG_1]','ORGANIZATION'], ['a.elsayed@corvex-med.com','[EMAIL_2]','EMAIL_ADDRESS'], ['€18,400,000','[AMOUNT_1]','DATE_TIME'], ['FR7630001007941234567890185','[IBAN_1]','CREDIT_CARD'], ['Thursday','[DATE_2]','DATE_TIME'], ['https://vdr.helios.eu/corvex-2026','[URL_1]','IP_ADDRESS'], ], }, engineering: { left: `Pinning incident INC-4821. The auth-edge pod on 10.44.17.22 is flapping since 03:14 UTC. Owner is Priya Rao (priya.rao@stellar.ai). Customer impacted: Banque Nordique, contract BN-2026-Q2. Rollback candidate: commit a7f3d2c on branch release/6.4. ETA for green dashboard 06:30 UTC.`, entities: [ ['INC-4821','[CASE_1]','CREDIT_CARD'], ['10.44.17.22','[IP_1]','IP_ADDRESS'], ['03:14 UTC','[DATE_1]','DATE_TIME'], ['Priya Rao','[PERSON_1]','PERSON'], ['priya.rao@stellar.ai','[EMAIL_1]','EMAIL_ADDRESS'], ['Banque Nordique','[ORG_1]','ORGANIZATION'], ['BN-2026-Q2','[CASE_2]','CREDIT_CARD'], ['a7f3d2c','[HASH_1]','IP_ADDRESS'], ['06:30 UTC','[DATE_2]','DATE_TIME'], ], }, finance: { left: `Q2 close — flagging three receivables over 60 days: • Aether Biosciences (PO 4771): €842,000, contact cfo@aether-bio.fr, owner Léa Martin. • Northwind Polymers: $1.2M, 401 Pine St, Austin TX, contact accounting@nwpoly.com. • Delta Freight GmbH: €310,500, contact r.wagner@delta-freight.de, phone +49 30 4455 6677. Board review Friday 14:00 CET.`, entities: [ ['Aether Biosciences','[ORG_1]','ORGANIZATION'], ['4771','[CASE_1]','CREDIT_CARD'], ['€842,000','[AMOUNT_1]','DATE_TIME'], ['cfo@aether-bio.fr','[EMAIL_1]','EMAIL_ADDRESS'], ['Léa Martin','[PERSON_1]','PERSON'], ['Northwind Polymers','[ORG_2]','ORGANIZATION'], ['$1.2M','[AMOUNT_2]','DATE_TIME'], ['401 Pine St, Austin TX','[LOCATION_1]','LOCATION'], ['accounting@nwpoly.com','[EMAIL_2]','EMAIL_ADDRESS'], ['Delta Freight GmbH','[ORG_3]','ORGANIZATION'], ['€310,500','[AMOUNT_3]','DATE_TIME'], ['r.wagner@delta-freight.de','[EMAIL_3]','EMAIL_ADDRESS'], ['+49 30 4455 6677','[PHONE_1]','PHONE_NUMBER'], ['Friday 14:00 CET','[DATE_1]','DATE_TIME'], ], }, }; function renderWithEntities(text, entities, showTokens) { // find all spans, non-overlapping, keep leftmost const hits = []; for (const [orig, tok, type] of entities) { let i = 0; while (true) { const idx = text.indexOf(orig, i); if (idx < 0) break; hits.push({ start: idx, end: idx + orig.length, orig, tok, type }); i = idx + orig.length; } } hits.sort((a,b) => a.start - b.start || (b.end - b.start) - (a.end - a.start)); const picked = []; let last = -1; for (const h of hits) if (h.start >= last) { picked.push(h); last = h.end; } const out = []; let cur = 0; picked.forEach((h, i) => { if (h.start > cur) out.push({text.slice(cur, h.start)}); if (showTokens) out.push({h.tok}); else out.push({h.orig}); cur = h.end; }); if (cur < text.length) out.push({text.slice(cur)}); return out; } const SideBySide = () => { const [which, setWhich] = useState('legal'); useReveal(); const sample = SAMPLES[which]; return (
03 · Visible proof

What you sent vs. what the model saw.

Tokens are deterministic within a session — so the model can reason about them — and meaningless outside of it. Flip through real prompts.

{[['legal','Legal & M&A'],['engineering','R&D · Engineering'],['finance','Finance · Strategy']].map(([k,l]) => ( ))}
What you sent
origin · localhost:7081
{renderWithEntities(sample.left, sample.entities, false)}
POST /v1/chat/completionsraw · 0 redactions
What the LLM saw
→ gpt-5 · tls
{renderWithEntities(sample.left, sample.entities, true)}
POST /v1/chat/completions{sample.entities.length} entities · 0 PII leaked
↻ Same token on the way back — response arrives de-pseudonymized, your client sees the originals.
interactive · toggle example · tokens morph 260ms
); }; /* ---------- Feature grid ---------- */ const AuditStream = () => { const rows = [ ['02:14:07','redact','[PERSON_3]','0.96'], ['02:14:07','redact','[EMAIL_2]','1.00'], ['02:14:09','detect','IBAN','1.00'], ['02:14:11','restore','[PERSON_3]','ok'], ['02:14:14','redact','[ORG_1]','0.88'], ['02:14:18','restore','[EMAIL_2]','ok'], ['02:14:21','redact','[PHONE_1]','0.98'], ['02:14:24','detect','CREDIT_CARD','1.00'], ]; return (
{[...rows, ...rows].map((r, i) => (
{r[0]} {r[1]} {r[2]} {r[3]}
))}
); }; const FEATURES = [ { icn: I.link, title: 'Works with any LLM', desc: 'Drop-in OpenAI-compatible endpoint. Swap the hostname, keep the SDK.', viz: (
openai anthropic mistral gemini azure bedrock
) }, { icn: I.server, title: 'Self-hosted, always', desc: 'Ships as a Rust binary or container. Runs in your VPC, on-prem, or air-gapped.', viz: (
client — biffer — egress ⋮ vendor
) }, { icn: I.scan, title: 'Two-layer detection', desc: 'Regex for format-bound entities, ONNX NER for prose. Tunable per policy.', viz: (
REGEX email · iban · phone · card · ip · url · ssn
NER   person · organization · location · date
conf 0.94
) }, { icn: I.tag, title: 'Session-aware tokens', desc: 'Same entity resolves to the same token across a session — so the model can still reason.', viz: (
Marie Dupont → [PERSON_1]
M. Dupont → [PERSON_1]
marie@acme.eu → [EMAIL_1]
) }, { icn: I.log, title: 'Tamper-evident audit', desc: 'Every detection, every restore, every prompt hash — append-only and SIEM-shaped.', viz: }, { icn: I.globe, title: 'Multilingual NER', desc: 'English and French ship now. German, Spanish, Italian, Dutch in eval.', viz: (
EN · shipping FR · shipping DE · eval ES · eval IT · roadmap NL · roadmap
) }, ]; const Features = () => { useReveal(); return (
04 · Platform

Six mechanics. No magic.

Each is independently verifiable, independently disableable, independently auditable. Your CISO can reason about the whole surface in an hour.

{FEATURES.map((f, i) => ( ))}
hover · cursor spotlight gold 14% · reveals stagger 60ms
); }; const FeatCard = ({ f, delay }) => { const ref = useRef(null); useSpotlight(ref); return (
{f.icn}

{f.title}

{f.desc}

{f.viz}
); }; /* ---------- Compliance band ---------- */ const Compliance = () => { useReveal(); return (
GDPR EU AI Act HIPAA SOC 2in progress ISO 27001roadmap NIS2

Designed to meet the controls your auditors already ask for.

); }; /* ---------- Use cases ---------- */ const UseCases = () => { useReveal(); const cases = [ { kind: 'Legal & M&A', title: 'Redact before review.', body: 'Draft memos, due-diligence Qs, and summarisations on deal docs — without dropping counterparty names, IBANs, or closing dates into someone else\'s log.', samples: ['[ORG_1]','[PERSON_2]','[AMOUNT_1]','[DATE_2]','[IBAN_1]'], tags: ['PERSON','ORGANIZATION','DATE_TIME','CREDIT_CARD','CREDIT_CARD']}, { kind: 'R&D · Engineering', title: 'Debug with context.', body: 'Paste stack traces, incident tickets, customer names — let the model help without tattooing your internal topology onto a training corpus.', samples: ['[IP_1]','[HASH_1]','[PERSON_1]','[ORG_2]','[CASE_1]'], tags: ['IP_ADDRESS','IP_ADDRESS','PERSON','ORGANIZATION','CREDIT_CARD']}, { kind: 'Finance · Strategy', title: 'Analyze without leaking.', body: 'Forecasts, receivables, tender responses — keep counterparty and figure intact to you, opaque to the vendor.', samples: ['[AMOUNT_1]','[EMAIL_1]','[ORG_3]','[DATE_1]','[PHONE_1]'], tags: ['DATE_TIME','EMAIL_ADDRESS','ORGANIZATION','DATE_TIME','PHONE_NUMBER']}, ]; return (
05 · Use cases

Three teams. Same proxy.

{cases.map((c,i) => ( ))}
); }; const UCCard = ({c, delay}) => { const ref = useRef(null); useSpotlight(ref); return (
{c.kind}

{c.title}

{c.body}

{c.samples.map((s,i) => {s})}
); }; /* ---------- Closing CTA ---------- */ const ClosingCTA = () => (

Stop leaking.
Ship faster.

Book a demo → See the flow

30-minute demo. No slides. Your prompts, our proxy, live on a screen share.

); /* ---------- HERO ---------- */ const Hero = () => { useReveal(); return (
LIVE · 2026 · v0.6.4

Use any LLM. Leak nothing.

BifferProxy is the self-hosted proxy that pseudonymizes sensitive data before it ever reaches a third-party model — then restores it on the way back. Transparent to your code. Auditable end-to-end.

GDPRready EU AI ActArt. 10 SOC 2in progress self-hostedalways EN · FRshipping
storyboard · 8s loop · type → redact → send → stream back → restore
); }; /* ---------- Motion pin toggle (replaced by Tweaks panel — kept as inert placeholder) ---------- */ const MotionToggle = () => null; window.MotionToggle = MotionToggle; /* ---------- App ---------- */ const Home = () => ( <>