/* homestory.jsx — the storytelling front page: one sticky SVG loop that the scroll narrates. Beat by beat the water loop becomes a copper circuit, grows parts, becomes a real breadboard, and ends as the blinking beacon. Reuses the chapters' .lesson / .beat / .lesson-sticky scaffolding from styles.css. Names hs*. Exports HomeStory. */ const { useState: hsUseState } = React; /* one dot pool riding the loop via SMIL; colour comes from CSS by mode */ function hsDots(path, n, dur) { return Array.from({ length: n }, (_, i) => ( )); } function HsScene({ mode }) { // the loop: rounded rect, clockwise, starting under the source device const LOOP = "M110 240 L110 136 Q110 110 136 110 L384 110 Q410 110 410 136 L410 444 Q410 470 384 470 L136 470 Q110 470 110 444 Z"; const on = (m) => (Array.isArray(m) ? m.includes(mode) : m === mode); const L = (visible, cls, children) => ( {children} ); const water = mode === "water"; const mono = "IBM Plex Mono, monospace"; return ( {/* ── the loop itself: water pipe under, copper over ── */} {L(water, "", )} {L(!water, "", )} {/* ── left: pump ↔ battery (device sits on the wire, y 240–340) ── */} {L(water, "", PUMP )} {L(!water, "", 9 V )} {/* ── right: pinch ↔ resistor (y 250–330 on x=410) ── */} {L(water, "", PINCH )} {L(!water, "", 330 Ω )} {/* ── the labels that swap — the whole trick of the course ── */} {L(water, "", PRESSURE FLOW → )} {L(on(["circuit", "parts"]), "", VOLTAGE CURRENT → )} {/* ── the parts, arriving one story-beat later ── */} {L(on(["parts", "build", "beacon"]), "", {/* capacitor on the top run */} capacitor {/* switch on the bottom run */} switch {/* LED on the top-right run */} LED )} {/* ── interior: build mode shows the same circuit on a mini board ── */} {L(mode === "build", "", {Array.from({ length: 9 }, (_, i) => )} {Array.from({ length: 9 }, (_, i) => )} {Array.from({ length: 9 }, (_, i) => )} {/* resistor + LED bridging the rails, like L2-01 */} {["#8a5a2b", "#111", "#b8731f"].map((c, i) => )} the same loop, on a real board )} {/* ── interior: the beacon finale ── */} {L(mode === "beacon", "", blinking at the rate YOU specced )} {/* ── the charges, always circulating ── */} {hsDots(LOOP, 9, 8)} {/* footer caption inside the stage */} {L(on(["water", "circuit"]), "", {water ? "one loop of water, pushed round and round" : "same loop — the dots are charge now"} )} ); } /* ── the beats ── */ function HsBeat({ id, marker, title, children, onView, first }) { const ref = useInViewCallback(onView); return (
{marker}
{children}
); } const HS_STAGE_LABEL = { water: "WATER · pressure pushes flow through a pinch", circuit: "THE SAME LOOP · copper edition", parts: "THE PARTS · each chapter adds one", build: "THE BUILD · diagram becomes board", beacon: "THE BEACON · your final build", }; function HomeStory({ kids, resumeHref, ctaLabel }) { const [mode, setMode] = hsUseState("water"); // reset to the first beat when the user scrolls back above the story — // beat 1's trigger band never re-fires once you're up in the hero. const secRef = React.useRef(null); React.useEffect(() => { const onScroll = () => { const el = secRef.current; if (el && el.getBoundingClientRect().top > window.innerHeight * 0.33) { setMode("water"); } }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
setMode("water")}>

You already
understand this.

{kids ? <>Ever squeezed a hose? Push, flow, pinch — you can feel all three. Electricity works exactly the same way, just too small to see. : <>You've felt electricity every time you've used a hose: pressure pushes, flow moves, a pinch fights back. That intuition is real physics — and it's the whole foundation.}

Watch the loop: water, pushed round and round.

 setMode("circuit")}>

Now swap
the labels.

{kids ? <>The pump becomes a battery. The pipe becomes copper. The pinch becomes a resistor. Nothing else changed — look, the loop is the same! : <>Pump → battery. Pipe → copper. Pinch → resistor. Pressure is voltage, flow is current — the same loop, relabelled. Every chapter in this course teaches with that translation.}

setMode("parts")}>

Ten chapters,
one new power each.

{kids ? <>A gate you can open and shut. A bucket that stores charge. A one-way door that glows. Chapter by chapter, the loop grows new tricks. : <>A switch. A capacitor that stores charge and keeps time. An LED. Then the punchline — a valve electricity flips by itself, the transistor. Each idea arrives as something you can watch move.}

setMode("build")}>

Then build it
for real.

{kids ? <>The drawing becomes a real breadboard with real parts. Every idea you learn, you wire up and light up yourself. : <>Level 2 walks every idea onto a real breadboard — reading the schematic, picking the values, wiring it, debugging it. The diagram and the board are the same circuit; you'll hold both in your head.}

setMode("beacon")}>

And leave with
a beacon.

{kids ? <>At the end you assemble the whole thing: a signal beacon that blinks on its own — because you built it to. : <>The course caps with a device: a flashing signal beacon you specced, sized, and assembled — blinking at the rate you designed. Below is the whole trail.}

{ctaLabel} → See the whole course ↓
); } Object.assign(window, { HomeStory });