The attack surface · 2026

It isn't just email anymore.

{vectors.map((v, i) => { const col = i % 3, row = Math.floor(i / 3); const x = startX + col * (cellW + gap); const y = startY + row * (cellH + gap); const op = cardShow(i); const sc = cardScale(i); return (

0{i + 1} / 06

{v.name}

{v.stat}

{v.sub}

); })} ); } function VectorIcon({ kind, color }) { const sz = 52; const s = { width: sz, height: sz }; const stroke = color; switch (kind) { case 'mail': return ( ); case 'sms': return ( ); case 'qr': return ( ); case 'phone': return ( ); case 'lock': return ( ); case 'face': return ( ); default: return null; } } // ═════════════════════════════════════════════════════════════════════════ // Scene 5 — 1 in 3 (60 → 70) // ═════════════════════════════════════════════════════════════════════════ function Scene5OneIn3() { const start = 60.0, end = 70.0; const t = useTime(); const local = t - start; const titleO = interpolate([0, 0.5, 9.2, 9.7], [0, 1, 1, 0], Easing.linear)(local); const figProgress = interpolate([0.6, 4.0], [0, 30], Easing.easeOutCubic)(local); const redP = interpolate([3.6, 5.4], [0, 1], Easing.easeOutCubic)(local); const bigO = interpolate([5.0, 5.8, 9.2, 9.7], [0, 1, 1, 0], Easing.linear)(local); const rows = 3, cols = 10; const figW = 70, figH = 100, gapX = 30, gapY = 40; const gridW = cols * figW + (cols - 1) * gapX; const gx = (1920 - gridW) / 2; const gy = 320; return (

KnowBe4 · 11.9 M users tested

Without training…

{Array.from({ length: rows * cols }).map((_, i) => { const col = i % cols, row = Math.floor(i / cols); const x = gx + col * (figW + gapX); const y = gy + row * (figH + gapY); const visible = i < figProgress; const isRed = i % 3 === 0; const fillP = isRed ? redP : 0; return (

); })}

1 in 3 will click.

on the first phishing test · 34.3% baseline

); } function FigureGlyph({ fillP }) { const grayCol = 'rgba(253,251,247,0.20)'; return ( ); } // ═════════════════════════════════════════════════════════════════════════ // Scene 6 — The fix (70 → 82) // ═════════════════════════════════════════════════════════════════════════ function Scene6Fix() { const start = 70.0, end = 82.0; const t = useTime(); const local = t - start; const titleO = interpolate([0, 0.5, 11.2, 11.8], [0, 1, 1, 0], Easing.linear)(local); const leftFill = interpolate([0.8, 2.4], [0, 1], Easing.easeOutCubic)(local); const arrowP = interpolate([3.0, 4.6], [0, 1], Easing.easeOutCubic)(local); const rightFill = interpolate([4.8, 5.8], [0, 1], Easing.easeOutCubic)(local); const eightyO = interpolate([6.8, 7.6, 11.2, 11.8], [0, 1, 1, 0], Easing.linear)(local); const eightyVal = useCountUp({ from: 0, to: 86, start: start + 7.0, end: start + 8.6, ease: Easing.easeOutExpo }); // Geometry const barMax = 290; const baseY = 760; const barW = 200; const leftX = 580; const rightX = 1340 - barW; const leftHeight = barMax * leftFill; const rightHeight = barMax * (4.6 / 34.3) * rightFill; return (

{/* Obsidian backdrop — faceted polygons with gold seams. Polygons echo the brand's low-poly gemstone language. */} {/* Title — centered, kept high to leave room for the chart */}

◆ The remedy

One year of training.

{/* baseline rule */}

{/* LEFT bar — baseline 34.3% (dim, decayed — reads as "bad") */}

34.3%

Baseline

{/* Arrow between bars — sits at the mid-height of the bars */}

12 months · simulations + training

{/* RIGHT bar — After 1 year 4.6% (luminous ridge-gold — reads as "good") */}

4.6%

After 1 year

{/* 86% reveal */}

{Math.floor(eightyVal)}% fewer clicks.

); } // ═════════════════════════════════════════════════════════════════════════ // Scene 7 — Inside the program (82 → 94) // Shows the actual training library: real phishing simulation templates // (Microsoft / Adobe / LastPass / Anthropic / RingCentral / Slack) and the // modern modules (AI Poisoning, Smishing simulator, Browser-in-the-Browser). // ═════════════════════════════════════════════════════════════════════════ function Scene7Inside() { const start = 82.0, end = 94.0; const t = useTime(); const local = t - start; const titleO = interpolate([0, 0.6, 11.2, 11.8], [0, 1, 1, 0], Easing.linear)(local); const sims = [ { brand: 'Microsoft', initials: 'M', subject: 'Password expiring today', kind: 'phishing' }, { brand: 'Adobe', initials: 'A', subject: 'Invite to sign agreement', kind: 'phishing' }, { brand: 'LastPass', initials: 'L', subject: 'Vault backup recommended', kind: 'phishing' }, { brand: 'Anthropic', initials: 'C', subject: 'Claude subscription · receipt', kind: 'phishing' }, { brand: 'RingCentral', initials: 'R', subject: 'Missed audio message · BitB', kind: 'bitb' }, { brand: 'Slack', initials: 'S', subject: 'SSO enabled · sign-in required', kind: 'bitb' }, ]; const cardShow = (i) => { const a = 1.0 + i * 0.55; return interpolate([a, a + 0.55, 10.8, 11.6], [0, 1, 1, 0], Easing.easeOutCubic)(local); }; const cardLift = (i) => { const a = 1.0 + i * 0.55; return interpolate([a, a + 0.55], [24, 0], Easing.easeOutCubic)(local); }; // 3x2 grid const cardW = 540, cardH = 200, gap = 24; const gridW = cardW * 3 + gap * 2; const gx = (1920 - gridW) / 2; const gy = 310; // module pills timing const pillsO = interpolate([5.0, 6.0, 10.8, 11.6], [0, 1, 1, 0], Easing.linear)(local); return (

Inside the program · Obsidian Ridge

Real threats · Real training

{/* sim cards 3x2 */} {sims.map((s, i) => { const col = i % 3, row = Math.floor(i / 3); const x = gx + col * (cardW + gap); const y = gy + row * (cardH + gap); const op = cardShow(i); const lift = cardLift(i); return (

{/* left brand chip column */}

{s.initials}

{/* content */}

{s.kind === 'bitb' ? ( ◆ Browser-in-Browser · simulation ) : ( ◆ Phishing · simulation )}

{s.brand}

{s.subject}

{/* corner tag (template number) */}

T-0{i + 1}

); })} {/* bottom: new module pills + practitioner note */}

{['AI Poisoning', 'Smishing simulator', 'Browser-in-the-Browser'].map((m, i) => (

+ {m}

))}

CISSP-led · one-click reporting · metrics that matter

); } // ═════════════════════════════════════════════════════════════════════════ // Scene 8 — Obsidian Ridge CTA (94 → 100) // ═════════════════════════════════════════════════════════════════════════ function Scene8CTA() { const start = 94.0, end = 100.0; const t = useTime(); const local = t - start; // Global scene fade-out near the end const sceneO = interpolate([5.4, 5.95], [1, 0], Easing.easeInQuad)(local); const logoO = interpolate([0, 0.9], [0, 1], Easing.easeOutCubic)(local) * sceneO; const lineO = interpolate([1.0, 2.0], [0, 1], Easing.easeOutCubic)(local) * sceneO; const subO = interpolate([2.2, 3.0], [0, 1], Easing.easeOutCubic)(local) * sceneO; const ctaO = interpolate([3.2, 4.0], [0, 1], Easing.easeOutCubic)(local) * sceneO; const underlineP = interpolate([3.8, 5.4], [0, 1], Easing.easeOutCubic)(local); return (

{/* Faceted obsidian backdrop — same low-poly language as the brand mountain, with gold seams catching imagined light. */} {/* Mountain-ridge silhouette in the lower third — same vocabulary as brand */} {/* PCB ornaments */}

{/* Soft radial halo behind the wordmark (intensifies on load) */}

{/* HexMark + wordmark */}

Obsidian Ridge

{/* tagline */}

Train your people.
Save your business.

{/* subtitle */}

CISSP-led security-awareness training · built for SMB

{/* CTA button + url */}

Book a briefing →

obsidianridge.io / briefing

); } Object.assign(window, { Scene4Vectors, Scene5OneIn3, Scene6Fix, Scene7Inside, Scene8CTA });