const [torn, setTorn] = useState(false); const [crackOn, setCrackOn] = useState(false); const [glitch, setGlitch] = useState(0); useEffect(() => { const t1 = setTimeout(() => setCrackOn(true), 200); const t2 = setTimeout(() => setTorn(true), 650); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); useEffect(() => { const iv = setInterval(() => setGlitch(g => (g + 1) % 6), 180); return () => clearInterval(iv); }, []); const gx = [0, -3, 2, -1, 3, 0][glitch]; const problems = (slide.content?.bullets ?? []).slice(0, 3); const solutions = (slide.content?.bullets ?? []).slice(3, 6); const BulletRow = ({ text, color, side }) => ( {side === 'left' ? '✕' : '✓'} {text} ); return (

{/* LEFT — CHAOS */}

{/* Torn edge SVG */}

⚠ The Problem

Chaos.
Every. Day.

{problems.map((p, i) => )}

{/* RIGHT — CALM */}

{[20, 45, 70].map((p, i) => (

))} {/* Torn edge SVG */}

✦ The Solution

Clarity.
Finally.

{solutions.map((s, i) => )}

{/* CENTER CRACK */}

{torn && [0.12, 0.3, 0.5, 0.68, 0.88].map((pos, i) => ( ))} {/* TITLE PILL */}

{slide.title}

);