// Slides 9–15 // ====================================================================== // SLIDE 9 — PLAYBOOK (Johnny's channel + network effect) // ====================================================================== const Slide09_Playbook = ({ num, total }) => { const [active, setActive] = React.useState(false); // Bump a nonce every time we (re)enter so the iframe fully remounts and // restarts its animation from frame 0 — instead of continuing mid-play. const [nonce, setNonce] = React.useState(0); React.useEffect(() => { const myIndex = num - 1; const onSlideChange = (e) => { const idx = e.detail && typeof e.detail.index === 'number' ? e.detail.index : null; if (idx === null) return; if (idx === myIndex) { setNonce((n) => n + 1); setActive(true); } else { setActive(false); } }; document.addEventListener('slidechange', onSlideChange); // Also handle the case where this slide is the initial slide on load — // deck-stage fires 'init' on mount, which we've already caught above, // but if the event fired before this listener was attached, fall back // to reading the stage's current index. try { const stage = document.querySelector('deck-stage'); if (stage && typeof stage.index === 'number' && stage.index === myIndex) { setNonce((n) => n + 1); setActive(true); } } catch (err) {} return () => document.removeEventListener('slidechange', onSlideChange); }, [num]); return (

The Playbook

{/* LEFT — title + numbered list */}

The playbook.

{String(i+1).padStart(2,'0')}

{item}

{/* RIGHT — embedded growth chart */}

{active ? (