ai voice → = 0.5)}>your voice

match {Math.round(t * 94 + 4)}%

{words.map((obj, i) => ( {obj.w} ))}

gen {(t * 2.4).toFixed(1)}s

); } /* ===================== Study Acorn — MCQ ===================== */ function StudyPebbleDemo() { const options = [ { k: 'A', t: 'Mitochondria' }, { k: 'B', t: 'Ribosomes' }, { k: 'C', t: 'Golgi apparatus' }, { k: 'D', t: 'Endoplasmic reticulum' }, ]; const correct = 'A'; const [picked, setPicked] = useState(null); const [revealed, setRevealed] = useState(false); // self-demo if no interaction useEffect(() => { if (picked !== null) return; const id = setTimeout(() => { setPicked('B'); setRevealed(true); setTimeout(() => { setPicked('A'); setTimeout(() => { setPicked(null); setRevealed(false); }, 1600); }, 1400); }, 1800); return () => clearTimeout(id); }, [picked]); const pick = (k) => { setPicked(k); setRevealed(true); }; const optStyle = (k) => { const isPicked = picked === k; const isCorrect = revealed && k === correct; const isWrong = revealed && isPicked && k !== correct; let bg = 'rgba(255,255,255,0.02)'; let border = 'rgba(255,255,255,0.06)'; let color = '#e4e4e7'; if (isCorrect) { bg = 'rgba(34,197,94,0.08)'; border = 'rgba(34,197,94,0.38)'; color = '#86efac'; } else if (isWrong) { bg = 'rgba(239,68,68,0.08)'; border = 'rgba(239,68,68,0.38)'; color = '#fca5a5'; } return { display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', borderRadius: 10, border: '1px solid ' + border, background: bg, color, fontSize: 13.5, cursor: 'pointer', transition: 'all .2s ease', textAlign: 'left', width: '100%', }; }; return (

ap biology · q 147 4.5 ★ · 12s

Which organelle is the primary site of ATP production in eukaryotic cells?

{options.map(o => ( ))}

); } /* ===================== Shadow Shield — scan ===================== */ function ShadowShieldDemo() { const [phase, setPhase] = useState(0); // 0 scan, 1 result const [progress, setProgress] = useState(0); useEffect(() => { let id; if (phase === 0) { setProgress(0); id = setInterval(() => { setProgress(p => { if (p >= 100) { setPhase(1); return 100; } return p + 2.5; }); }, 60); } else { id = setTimeout(() => { setPhase(0); }, 3400); } return () => { clearInterval(id); clearTimeout(id); }; }, [phase]); const services = [ { n: 'Slack workspace', s: phase === 1 ? 'safe' : 'scan', d: 4 }, { n: 'Notion docs', s: phase === 1 ? 'risk' : 'scan', d: 8 }, { n: 'Google Drive', s: phase === 1 ? 'safe' : 'scan', d: 14 }, { n: 'Zoom transcripts', s: phase === 1 ? 'risk' : 'scan', d: 20 }, ]; const stateColor = (s) => s === 'safe' ? '#22c55e' : s === 'risk' ? '#ef4444' : '#71717a'; const stateLabel = (s) => s === 'safe' ? 'clean' : s === 'risk' ? 'training detected' : 'scanning…'; return (

{phase === 0 ? 'scanning connected apps' : '2 risks surfaced'} {phase === 0 ? `${Math.round(progress)}%` : 'just now'}

{services.map((svc, i) => { const revealed = phase === 1 || progress > (i + 1) * 25; return (

{svc.n} {revealed ? stateLabel(svc.s) : 'pending'}

); })}

); } /* ===================== Traffic Guard — keyword chart ===================== */ function TrafficGuardDemo() { const [hovered, setHovered] = useState(2); const data = [ { k: 'best crm for startups', before: 84, after: 71 }, { k: 'how to cold email', before: 92, after: 48 }, { k: 'saas pricing models', before: 68, after: 63 }, { k: 'b2b landing page tips', before: 77, after: 29 }, { k: 'ga4 setup guide', before: 55, after: 52 }, ]; useEffect(() => { const id = setInterval(() => { setHovered(h => (h + 1) % data.length); }, 1800); return () => clearInterval(id); }, [data.length]); const max = 100; return (

ai overview cannibalization · 30d −48% clicks

{data.map((d, i) => { const active = hovered === i; const drop = d.before - d.after; return (

setHovered(i)} style={{ display: 'grid', gridTemplateColumns: '1fr 60px', gap: 12, alignItems: 'center', opacity: active ? 1 : 0.72, transition: 'opacity .2s ease', }} >

{d.k}

20 ? '#ef4444' : '#71717a', textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 500, }}>−{drop}%

); })}

before after ai overviews

); } /* ===================== Wholefed — food score ===================== */ function WholefedDemo() { const [score, setScore] = useState(0); const [phase, setPhase] = useState(0); const target = 72; useEffect(() => { let raf; const tick = () => { setScore(s => { if (phase === 0) { if (s < target) return s + 2; setTimeout(() => setPhase(1), 900); return target; } if (phase === 1) { setTimeout(() => { setScore(0); setPhase(0); }, 2200); return s; } return s; }); raf = requestAnimationFrame(tick); }; const id = setInterval(tick, 60); return () => clearInterval(id); }, [phase]); const scoreColor = score < 40 ? '#ef4444' : score < 65 ? '#eab308' : '#22c55e'; return (

lunch · poke bowl today · 12:41

{/* the "photo" — striped placeholder with food label overlay */}

[ user photo ]

{/* animated score chip */}

0 ? 1 : 0, transform: score > 0 ? 'scale(1)' : 'scale(0.9)', transition: 'all .3s ease', }}>

{score}

health score

{[ { k: 'protein', v: 'high', good: true }, { k: 'sodium', v: 'watch', good: false }, { k: 'fiber', v: 'good', good: true }, ].map(f => (

{f.k} {f.v}

))}

); } /* ===================== Feastmate — macro bars ===================== */ function FeastmateDemo() { const [t, setT] = useState(0); useEffect(() => { let raf; const step = () => { setT(p => { const next = p + 0.012; return next > 1.4 ? 0 : next; }); raf = requestAnimationFrame(step); }; const id = setInterval(step, 50); return () => clearInterval(id); }, []); const macros = [ { k: 'protein', target: 42, unit: 'g', color: '#60a5fa' }, { k: 'carbs', target: 58, unit: 'g', color: '#fbbf24' }, { k: 'fat', target: 18, unit: 'g', color: '#f472b6' }, ]; const kcal = 540; const progress = Math.min(1, t); return (

miso-glazed salmon bowl

fits 540 kcal · 42p / 58c / 18f

match

{macros.map(m => (

{m.k} {Math.round(m.target * progress)}/{m.target}{m.unit}

))}

15 min · 1 serving {kcal} kcal

); } Object.assign(window, { EssayClonerDemo, StudyPebbleDemo, ShadowShieldDemo, TrafficGuardDemo, WholefedDemo, FeastmateDemo, });