// Ventrin promo — cinematic scenes // Brand tokens lifted from prompt-security/landing/styles.css const V = { bgPage: '#f3f1ec', bg0: '#faf8f4', bg1: '#f1efe9', bg2: '#e9e6df', ink: '#1a1d21', ink2: '#3a3f47', ink3: '#5a6069', ink4: '#808792', ink5: '#a7acb4', line: '#d8d3c8', lineSoft: '#e4e0d4', lineFirm: '#c4bfb3', blue: '#2c4a6a', blue2: '#4870a8', blueTint: '#dce5ef', amber: '#a86e1a', amberTint:'#f6ead4', red: '#8a2f2f', redTint: '#f1dcdc', green: '#2d5b3a', greenTint:'#dde7dc', dark: '#0c1014', darkSoft: '#161b22', serif: '"Source Serif 4", "Tiempos Text", Georgia, serif', sans: 'Inter, ui-sans-serif, system-ui, sans-serif', mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace', }; // ── Helpers ─────────────────────────────────────────────────────────────── function entry({ localTime, duration }, entryDur = 0.5, exitDur = 0.4, lift = 18) { const exitStart = Math.max(0, duration - exitDur); if (localTime < entryDur) { const t = Easing.easeOutCubic(clamp(localTime / entryDur, 0, 1)); return { opacity: t, transform: `translateY(${(1 - t) * lift}px)` }; } if (localTime > exitStart) { const t = Easing.easeInCubic(clamp((localTime - exitStart) / exitDur, 0, 1)); return { opacity: 1 - t, transform: `translateY(${-t * lift * 0.5}px)` }; } return { opacity: 1, transform: 'translateY(0)' }; } function Typewriter({ text, progress, caret = true, time = 0, fontSize, color, font, weight, letterSpacing, lineHeight = 1.45 }) { const n = Math.floor(progress * text.length); const shown = text.slice(0, n); const caretOn = Math.floor(time * 2) % 2 === 0; return ( {shown} {caret && } ); } function Logomark({ size = 24, fill }) { return ( ); } function Eyebrow({ children, color = V.ink3, dotColor = V.blue }) { return (
{children}
); } function BrowserChrome({ url, ventrinActive = true, highlight = false }) { return (
{url} {ventrinActive && ( Ventrin )}
); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 1 — Cold open: the pain // A frantic moment. A user has just hit send. Notifications cascade in. // ═══════════════════════════════════════════════════════════════════════════ function SceneColdOpen({ start, end }) { return ( {(ctx) => { const t = ctx.localTime; const e = entry(ctx, 0.3, 0.4, 0); return (
{/* Darkened context: a chat with a prompt that just got sent */}
1.4 ? 'blur(0.6px)' : 'none', transition: 'filter 400ms', }}>
You · sent 11:42 AM
Here's the full client roster — Sarah Chen (DOB 03/11/1984), Marcus Webb (NHS 778 234 9911), Anya Volkov (passport K9871234). Draft me a status memo for each, the matter is{' '} Northgate v. Hensley. Use AWS key AKIA7QH3K9F8MRTZX2VL to pull their case files.
ChatGPT is thinking…
{/* Red pulse around the chat once "sent" lands */} {t > 0.6 && t < 2.5 && (() => { const p = clamp((t - 0.6) / 1.4, 0, 1); return (
); })()} {/* Cascade of notifications top-right */} {/* Caption */} By the time you notice, it’s already sent.} /> {/* Persistent timestamp ticker */}
11:42:{String(Math.floor(t * 3) + 17).padStart(2, '0')} · TUE
); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 2 — Stat + Headline hook // ═══════════════════════════════════════════════════════════════════════════ function SceneStatHook({ start, end }) { return ( {(ctx) => { const t = ctx.localTime; return (
{/* Big stat ticks up */}
The everyday reality
of employees paste sensitive data into AI tools.
Source · Internal survey, 2025
{/* Transition: shrink stat, reveal headline */}

It’s time to control what ships.

); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 3 — Cursor + typing, the user composes a risky prompt // Camera starts wide on the chat, then dollies in on the input as Ventrin engages. // ═══════════════════════════════════════════════════════════════════════════ const RISKY = "Summarise this contract for John Smith\n(DOB 14/06/1987, NHS 943 476 5919) at Acme Legal Ltd.\nKey terms, liabilities, AWS key AKIA7QH3K9F8MRTZX2VL."; function SceneRisky({ start, end }) { return ( {(ctx) => { const t = ctx.localTime; const e = entry(ctx, 0.4, 0.5, 0); // Typing 0.8s → 4.5s const typeProg = clamp((t - 0.8) / 3.7, 0, 1); // Camera dolly: start neutral, zoom into the input around t=2.5 const cam = [ { at: 0, x: 0, y: 0, scale: 1.0 }, { at: 1.8, x: 0, y: 0, scale: 1.0 }, { at: 3.0, x: 60, y: -100, scale: 1.18 }, { at: 5.5, x: 60, y: -100, scale: 1.18 }, ]; return (
{/* Chat mock */}
3.6}/>
You · drafting
{/* Ventrin "waking up" pill near input — activates as it detects risk */} {t > 3.4 && (() => { const p = clamp((t - 3.4) / 0.6, 0, 1); return (
VENTRIN — WATCHING
Local model scanning before send…
); })()} {/* Cursor moves toward Send, gets close, hesitates */}
A real prompt, mid-thought.} />
); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 4 — Intercept: the dramatic redaction beat // ═══════════════════════════════════════════════════════════════════════════ const REDACTIONS = [ { match: 'John Smith', label: 'NAME', kind: 'name' }, { match: '14/06/1987', label: 'DOB', kind: 'dob' }, { match: '943 476 5919', label: 'NHS_ID', kind: 'health' }, { match: 'Acme Legal Ltd', label: 'ORG', kind: 'org' }, { match: 'AKIA7QH3K9F8MRTZX2VL', label: 'AWS_KEY', kind: 'secret' }, ]; function RedactingText({ text, revealed, stage }) { let cursor = 0; const segs = []; while (cursor < text.length) { let next = null; for (let i = 0; i < REDACTIONS.length; i++) { if (i >= revealed) break; const r = REDACTIONS[i]; const idx = text.indexOf(r.match, cursor); if (idx >= 0 && (next == null || idx < next.idx)) next = { idx, r }; } if (!next) { segs.push({ kind: 'text', value: text.slice(cursor) }); break; } if (next.idx > cursor) segs.push({ kind: 'text', value: text.slice(cursor, next.idx) }); segs.push({ kind: 'redact', r: next.r }); cursor = next.idx + next.r.match.length; } return (
{segs.map((s, i) => { if (s.kind === 'text') return {s.value}; if (stage === 'redact' || stage === 'sanitized') { return ( [{s.r.label}] ); } return ( {s.r.match} ); })}
); } function SceneIntercept({ start, end }) { return ( {(ctx) => { const t = ctx.localTime; const e = entry(ctx, 0.4, 0.5, 0); // Scan sweep 0.0 → 1.4 // Highlights resolve at 1.5 → 2.5 (one per ~0.2s) // Collapse to [REDACTED] pills at 2.8 const scanProg = t < 1.4 ? clamp(t / 1.4, 0, 1) : -1; const highlights = Math.min(REDACTIONS.length, Math.max(0, Math.floor((t - 1.5) / 0.2))); const stage = t < 2.8 ? 'highlight' : 'redact'; const revealed = stage === 'highlight' ? highlights : REDACTIONS.length; const flash = t > 2.7 && t < 2.95 ? (1 - (t - 2.7) / 0.25) : 0; return (
{/* Chat mock anchored just below caption strip */}
You · drafting
{/* Scan line */} {scanProg >= 0 && (
)}
{stage === 'highlight' ? `${highlights} identifier${highlights === 1 ? '' : 's'} found` : `${REDACTIONS.length} identifiers removed locally`}
{/* Side panel: detected items live ticker */} {t > 0.7 && (() => { const panelE = clamp((t - 0.7) / 0.5, 0, 1); return (
Detected locally
Nothing leaves your device.
{REDACTIONS.map((r, i) => { const itemP = clamp((t - 1.5 - i * 0.2) / 0.35, 0, 1); if (itemP <= 0) return null; return (
{r.label} {stage === 'redact' ? '✓ removed' : 'flagged'}
); })}
); })()} {/* Flash on collapse */} {flash > 0 && (
)} Ventrin intercepts before send.} /> Identifiers stripped on your machine.} />
); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 5 — Safe send to multiple AI tools // ═══════════════════════════════════════════════════════════════════════════ function SceneSafeSend({ start, end }) { return ( {(ctx) => { const t = ctx.localTime; const e = entry(ctx, 0.4, 0.5, 0); const fly = clamp(t / 1.8, 0, 1); return (
Safe to send
Summarise this contract for{' '} {['NAME', 'DOB', 'NHS_ID', 'ORG', 'AWS_KEY'].map((l, i) => null)} [NAME]{' '} (DOB [DOB], NHS{' '} [NHS_ID]) at{' '} [ORG]. Key terms, liabilities, AWS key{' '} [AWS_KEY].
Sanitised prompt
encrypted · over TLS
{[ { name: 'ChatGPT', host: 'chat.openai.com' }, { name: 'Claude', host: 'claude.ai' }, { name: 'Gemini', host: 'gemini.google.com' }, { name: 'Copilot', host: 'copilot.microsoft.com' }, ].map((p, i) => { const arrived = fly > 0.4 + i * 0.08; return (
{p.name[0]}
{p.name}
{p.host}
{arrived ? '✓ Protected' : '...'}
); })}
One control layer, every AI tool.} />
); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 6 — Dashboard glimpse: counters tick up // ═══════════════════════════════════════════════════════════════════════════ function SceneDashboard({ start, end }) { const stats = [ { label: 'Prompts protected this week', from: 0, to: 1247, suffix: '' }, { label: 'Identifiers removed locally', from: 0, to: 3892, suffix: '' }, { label: 'Sent to ChatGPT · Claude · Gemini', from: 0, to: 100, suffix: '%' }, { label: 'Data that left your network', from: 0, to: 0, suffix: '' }, ]; return ( {(ctx) => { const t = ctx.localTime; const e = entry(ctx, 0.4, 0.5, 0); return (
Your team, this week

What you'd see by Friday.

{stats.map((s, i) => { const cp = clamp((t - 0.5 - i * 0.14) / 0.5, 0, 1); return (
{s.label}
); })}
SHIPPED · v0.9 · Chrome, Edge, Arc · audit log exports as CSV
); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 7 — Value pillars // ═══════════════════════════════════════════════════════════════════════════ function SceneValue({ start, end }) { const cards = [ { eyebrow: 'LEGAL', title: 'Client privilege, intact.', copy: 'Names, matter numbers, contract terms stay on-device.' }, { eyebrow: 'HEALTH', title: 'PHI never leaves the browser.', copy: 'NHS / MRN identifiers redacted before send. Audit-ready.' }, { eyebrow: 'SECRETS', title: 'API keys can\u2019t slip out.', copy: 'AWS, GCP, OpenAI keys intercepted at the input field.' }, ]; return ( {(ctx) => { const t = ctx.localTime; const e = entry(ctx, 0.4, 0.5, 0); return (
Built for regulated teams

Three kinds of data, one control layer.

{cards.map((c, i) => { const cp = clamp((t - 0.6 - i * 0.16) / 0.6, 0, 1); const ce = Easing.easeOutCubic(cp); return (
{c.eyebrow}
{c.title}
{c.copy}
); })}
); }} ); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 8 — Close // ═══════════════════════════════════════════════════════════════════════════ function SceneClose({ start, end }) { return ( {(ctx) => { const e1 = entry(ctx, 0.5, 0.4, 24); const e2 = entry({ ...ctx, localTime: ctx.localTime - 0.25 }, 0.6, 0.4, 24); const e3 = entry({ ...ctx, localTime: ctx.localTime - 0.5 }, 0.5, 0.4, 18); const e4 = entry({ ...ctx, localTime: ctx.localTime - 0.75 }, 0.5, 0.4, 12); return (
Ventrin

Control what your team{' '} sends to AI.

ventrin.com
); }} ); } // ── Persistent UI: Ventrin pill + filename ──────────────────────────────── function PersistentChrome({ duration }) { const time = useTime(); // Hide during cold open (0-5s) and close (last 5s) const inCold = time < 5; const closeStart = duration - 4.5; const inClose = time > closeStart; const opacity = (inCold || inClose) ? 0 : 1; return ( <>
Ventrin
); } // CSS keyframes for spinner const _styleNode = document.createElement('style'); _styleNode.textContent = `@keyframes vt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.head.appendChild(_styleNode); Object.assign(window, { V, SceneColdOpen, SceneStatHook, SceneRisky, SceneIntercept, SceneSafeSend, SceneDashboard, SceneValue, SceneClose, PersistentChrome, });