import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; import { useFireproof } from "use-fireproof"; import { Button, Card, Icon, IconButton, Text } from "@vibes.diy/pouf"; const PRIMARY = "var(--primary)"; // ---------- physics ---------- const WORLDS = [ { value: "moon", label: "Moon", g: 1.62 }, { value: "mars", label: "Mars", g: 3.71 }, { value: "earth", label: "Earth", g: 9.81 }, { value: "jupiter", label: "Jupiter", g: 24.79 }, ]; const worldFor = (g) => WORLDS.find((w) => Math.abs(w.g - g) < 0.005); function shot(v0, deg, g) { const rad = (deg * Math.PI) / 180; const vx = v0 * Math.cos(rad); const vy = v0 * Math.sin(rad); const T = (2 * vy) / g; return { v0, deg, g, vx, vy, T, R: vx * T, H: (vy * vy) / (2 * g), x: (t) => vx * t, y: (t) => vy * t - 0.5 * g * t * t, }; } const fmt = (n, d = 1) => (Number.isFinite(n) ? n.toFixed(d) : "—"); function niceStep(span) { const raw = span / 5; const p = Math.pow(10, Math.floor(Math.log10(raw))); const m = raw / p; return (m < 1.5 ? 1 : m < 3.5 ? 2 : m < 7.5 ? 5 : 10) * p; } // Equal-scale view so a parabola keeps its true shape; height follows the content. function makeView(W, worldW, worldH, minH, maxH) { const pl = 44, pr = 20, pt = 20, pb = 34; let k = (W - pl - pr) / worldW; let H = pt + pb + worldH * k; if (H > maxH) { H = maxH; k = Math.min(k, (H - pt - pb) / worldH); } H = Math.max(H, minH); return { W, H, pl, pb, k, sx: (x) => pl + x * k, sy: (y) => H - pb - y * k, maxX: (W - pl - pr) / k, maxY: (H - pt - pb) / k }; } function pathOf(s, view, upTo) { const end = upTo === undefined ? s.T : Math.min(upTo, s.T); const n = 60; let d = ""; for (let i = 0; i <= n; i++) { const t = (i / n) * end; d += `${i ? "L" : "M"}${view.sx(s.x(t)).toFixed(1)} ${view.sy(Math.max(0, s.y(t))).toFixed(1)} `; } return d; } // ---------- hooks ---------- function useReducedMotion() { const [r, setR] = useState(false); useEffect(() => { const m = window.matchMedia("(prefers-reduced-motion: reduce)"); setR(m.matches); const on = () => setR(m.matches); m.addEventListener("change", on); return () => m.removeEventListener("change", on); }, []); return r; } function useNarrow() { const [n, setN] = useState(false); useLayoutEffect(() => { const on = () => setN(window.innerWidth < 640); on(); window.addEventListener("resize", on); return () => window.removeEventListener("resize", on); }, []); return n; } // A looping 0..1 phase for the explainer animations. function useLoop(periodMs) { const reduced = useReducedMotion(); const [p, setP] = useState(0.75); useEffect(() => { if (reduced) { setP(0.75); return; } let raf, start; const tick = (ts) => { if (start === undefined) start = ts; setP(((ts - start) % periodMs) / periodMs); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [periodMs, reduced]); return p; } // One launch: plays sim time faster or slower so every flight lasts 1.4–3.2 s on screen. function useFlight(onLand) { const [flight, setFlight] = useState(null); const landRef = useRef(onLand); landRef.current = onLand; const running = flight && flight.running; useEffect(() => { if (!running) return; const s = flight.s; const wall = Math.min(3.2, Math.max(1.4, s.T)); let raf, start; const tick = (ts) => { if (start === undefined) start = ts; const t = ((ts - start) / 1000) * (s.T / wall); if (t >= s.T) { setFlight({ s, t: s.T, running: false }); if (landRef.current) landRef.current(s); return; } setFlight({ s, t, running: true }); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [running, flight && flight.s]); const launch = (s) => setFlight({ s, t: 0, running: true }); const clear = () => setFlight(null); return { flight, launch, clear, flying: !!running }; } // ---------- shared drawing ---------- function Frame({ view, children, label }) { const step = niceStep(view.maxX); const ticks = []; for (let x = 0; x <= view.maxX + 1e-6; x += step) ticks.push(x); const yticks = []; for (let y = step; y <= view.maxY + 1e-6; y += step) yticks.push(y); const fs = view.W < 500 ? 13 : 14; return ( ); } function Ball({ cx, cy, r = 9 }) { return ; } function Trail({ s, view, upTo, every }) { const dots = []; for (let t = every; t < Math.min(upTo, s.T); t += every) dots.push(t); return dots.map((t) => ( )); } function Readout({ label, value, unit }) { return (

{label}

{value} {unit}

); } const rc = { label: "text-xs uppercase tracking-wide font-bold text-muted-foreground truncate", value: "font-mono text-xl font-bold tabular-nums whitespace-nowrap", unit: "text-sm text-muted-foreground", }; function LabeledSlider({ label, value, unit, min, max, step, onChange, digits = 0 }) { return ( {label} {fmt(value, digits)} {unit} onChange(parseFloat(e.target.value))} className={ls.range} /> ); } const ls = { wrap: "flex flex-col gap-1", row: "flex items-baseline justify-between gap-2", label: "text-sm uppercase tracking-wide font-bold", value: "font-mono text-base font-bold tabular-nums", unit: "text-sm text-muted-foreground", range: "w-full h-8 accent-primary cursor-pointer", }; function Chips({ label, value, options, onChange }) { return (

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

); } const cp = { row: "flex flex-wrap gap-2", on: "px-4 py-2 rounded-md text-base font-bold bg-foreground text-background border border-foreground shadow-sm transition active:translate-y-px", off: "px-4 py-2 rounded-md text-base font-bold bg-card text-foreground border border-border hover:bg-muted transition active:translate-y-px", }; function SlideHead({ kicker, title, children, narrow }) { return (

{kicker}

{title}

{children &&

{children}

}

); } const sh = { wrap: "flex flex-col gap-2", kicker: "text-sm uppercase tracking-wide font-bold text-primary", titleS: "text-3xl font-bold tracking-tight leading-tight", titleL: "text-5xl font-bold tracking-tight leading-tight", body: "text-lg text-muted-foreground max-w-3xl", }; function Eq({ children }) { return

{children}

; } function Art({ children }) { return (

{children}

); } // ---------- slide 1: hook ---------- function HookSlide({ next, narrow, intro }) { const p = useLoop(3800); const s = shot(22, 62, 9.81); const view = narrow ? makeView(400, s.R * 1.12, s.H * 1.3, 220, 320) : makeView(640, s.R * 1.1, s.H * 1.5, 360, 480); const t = Math.min(1, p / 0.8) * s.T; const bx = view.sx(s.x(t)), by = view.sy(s.y(t)); const vyNow = s.vy - s.g * t; const a = 2.4; return (

{(intro && intro.kicker) || "A three-minute physics lesson"}

Why does a thrown ball curve?

Every throw is two simple motions happening at once. See how they combine, then launch your own shots on the Moon and Jupiter.

7 slides · swipe, tap or use arrow keys

gravity

); } const hk = { grid: "grid gap-6 lg:grid-cols-2 lg:items-center lg:gap-12 lg:py-6", copy: "flex flex-col gap-4", titleS: "text-4xl font-bold tracking-tight leading-none", titleL: "text-6xl font-bold tracking-tight leading-none", bodyS: "text-lg text-muted-foreground", bodyL: "text-xl text-muted-foreground max-w-xl", cta: "flex flex-wrap items-center gap-4 pt-2", meta: "text-sm text-muted-foreground", }; // ---------- slide 2: split velocity ---------- function SplitSlide({ narrow }) { const [deg, setDeg] = useState(40); const v0 = 30; const s = shot(v0, deg, 9.81); const W = narrow ? 400 : 640, H = narrow ? 300 : 400; const ox = narrow ? 50 : 70, oy = H - 44; const L = narrow ? 250 : 400; const rad = (deg * Math.PI) / 180; const ex = ox + L * Math.cos(rad), ey = oy - L * Math.sin(rad); const arcR = narrow ? 50 : 70; const fs = narrow ? 17 : 19; return (

A launch at an angle is really a sideways speed and an upward speed travelling together. Tilt it and watch the two trade places.

vₓ = v₀·cos θ = {fmt(s.vx)} m/s v_y = v₀·sin θ = {fmt(s.vy)} m/s At 0° it all goes sideways, at 90° it all goes up, and at 45° the two are equal.

); } const sl = { wrap: "flex flex-col gap-6", grid: "grid gap-6 lg:grid-cols-2 lg:items-center", side: "flex flex-col gap-4", }; // ---------- slide 3: gravity only pulls down ---------- function GravitySlide({ narrow }) { const p = useLoop(4800); const s = shot(24, 60, 9.81); const view = narrow ? makeView(400, s.R * 1.08, s.H * 1.15, 200, 300) : makeView(640, s.R * 1.08, s.H * 1.15, 300, 440); const t = Math.min(1, p / 0.8) * s.T; const dt = s.T / 10; const steps = []; for (let k = 1; k * dt <= t + 1e-6 && k < 10; k++) steps.push(k * dt); const bx = view.sx(s.x(t)), by = view.sy(s.y(t)); return (

Sideways, nothing pushes or pulls, so the ball keeps a steady pace. Upward, gravity trims 9.8 m/s off every second. Together they draw a parabola.

{steps.map((st) => { const x = view.sx(s.x(st)), y = view.sy(s.y(st)); return ( ); })}

Ground shadow: equal steps every tick Wall shadow: rises, pauses, falls back

x(t) = vₓ·t y(t) = v_y·t − ½·g·t²

); } const gr = { legend: "flex flex-col gap-2 text-base", key: "flex items-center gap-2", dotX: "inline-block w-3 h-3 rounded-full bg-success flex-none", dotY: "inline-block w-3 h-3 rounded-full bg-info flex-none", }; // ---------- slide 4: the live lab ---------- function LabSlide({ narrow, lab, setLab }) { const { v0, deg, g } = lab; const s = shot(v0, deg, g); const { flight, launch, flying } = useFlight(); const live = flight ? flight.s : s; const fitW = Math.max(s.R, live.R, 10) * 1.1; const fitH = Math.max(s.H, live.H, 4) * 1.2; const view = narrow ? makeView(400, fitW, fitH, 190, 300) : makeView(800, fitW, fitH, 300, 400); const t = flight ? flight.t : null; const world = worldFor(g); const set = (k) => (v) => setLab({ ...lab, [k]: v }); const peakX = view.sx(s.R / 2), peakY = view.sy(s.H); const fs = narrow ? 13 : 14; const f = flight && flight.s; return (

peak {fmt(s.H)} m {f && ( {flying ? ( ) : ( {fmt(f.R)} m )} )} {!f && }

set("g")(WORLDS.find((x) => x.value === w).g)} options={WORLDS} />

x(t) = {fmt(s.vx)}·t

y(t) = {fmt(s.vy)}·t − {fmt(g / 2, 2)}·t²

); } const lb = { wrap: "flex flex-col gap-4", grid: "grid gap-6 lg:grid-cols-3", plotCol: "flex flex-col gap-3 lg:col-span-2", under: "flex flex-col gap-3 sm:flex-row sm:items-stretch", readouts: "grid grid-cols-3 gap-2 flex-1", controls: "flex flex-col gap-4", eqs: "font-mono text-sm bg-muted rounded-md px-3 py-2 flex flex-col gap-1 text-muted-foreground", }; // ---------- slide 5: what goes farthest ---------- const FAN = [15, 30, 45, 60, 75]; function FarthestSlide({ narrow }) { const [pick, setPick] = useState("30"); const [w, setW] = useState("earth"); const g = WORLDS.find((x) => x.value === w).g; const v0 = 20; const shots = FAN.map((d) => shot(v0, d, g)); const view = narrow ? makeView(400, shots[2].R * 1.1, shots[4].H * 1.25, 200, 300) : makeView(640, shots[2].R * 1.1, shots[4].H * 1.25, 300, 420); const chosen = shot(v0, Number(pick), g); const ratio = chosen.R / shot(v0, Number(pick), 9.81).R; const twin = 90 - Number(pick); const fs = narrow ? 14 : 15; return (

Same 20 m/s throw, five angles. Pick one, then switch worlds and watch every arc stretch or squash together.

{shots.map((a) => { const on = String(a.deg) === pick; const twinOn = Number(pick) !== 45 && a.deg === twin; const best = a.deg === 45; return ( {a.deg}° ); })}

({ value: String(d), label: `${d}°` }))} />

{Number(pick) === 45 ? "45° splits the speed evenly between climbing and travelling: the sweet spot for distance." : `${pick}° and ${twin}° are range twins: they land on the very same spot.`}

); } const fr = { readouts: "grid grid-cols-2 gap-3", note: "text-lg", }; // ---------- slide 6: challenge ---------- function newTarget(prev) { const choices = WORLDS.filter((x) => !prev || x.value !== prev.world.value); const world = choices[Math.floor(Math.random() * choices.length)]; const maxR = (40 * 40) / world.g; const dist = Math.round(maxR * (0.3 + Math.random() * 0.55)); return { world, dist, tol: Math.max(1, dist * 0.04) }; } function ChallengeSlide({ narrow }) { const [target, setTarget] = useState({ world: WORLDS[2], dist: 60, tol: 2.4 }); const [v0, setV0] = useState(20); const [deg, setDeg] = useState(45); const [result, setResult] = useState(null); const [hits, setHits] = useState(0); const g = target.world.g; const { flight, launch, clear, flying } = useFlight((s) => { const off = s.R - target.dist; const hit = Math.abs(off) <= target.tol; if (hit) setHits((h) => h + 1); setResult({ hit, off, R: s.R }); }); const worldW = target.dist * 1.35; const view = narrow ? makeView(400, worldW, worldW * 0.42, 180, 400) : makeView(800, worldW, worldW * 0.36, 260, 400); const tx = view.sx(target.dist), tw = Math.max(6, target.tol * 2 * view.k); const t = flight ? flight.t : 0; const fire = () => { setResult(null); launch(shot(v0, deg, g)); }; const next = () => { setResult(null); clear(); setTarget(newTarget(target)); }; let message = `Land within ${fmt(target.tol)} m of the flag. You're on ${target.world.label}, where g = ${target.world.g} m/s².`; if (result && result.hit) message = `Bullseye! You landed at ${fmt(result.R)} m. Ready for a new target?`; else if (result && result.off < 0) message = `Landed at ${fmt(result.R)} m, ${fmt(-result.off)} m short of the flag. A little more speed carries it there.`; else if (result) message = `Landed at ${fmt(result.R)} m, ${fmt(result.off)} m past the flag. Ease the speed down a touch.`; const flagH = narrow ? 44 : 60; return (

{hits} {hits === 1 ? "bullseye" : "bullseyes"}

{message}

{flight && ( )} {!flight && }

{result && result.hit ? ( ) : ( )} {!(result && result.hit) && }

Hint: range = v₀²·sin(2θ) / g

); } const ch = { head: "flex flex-wrap items-end justify-between gap-3", score: "flex items-center gap-2 font-mono text-lg font-bold", msg: "text-lg", msgHit: "text-lg font-bold text-success", btns: "flex flex-wrap items-center gap-3", }; // ---------- slide 7: recap ---------- function Vy() { return <>v_y; } function RecapSlide({ goTo, narrow }) { const cards = [ { title: "Split it", body: "Any launch is a sideways speed plus an upward speed.", eq: [<>vₓ = v₀·cos θ, <> = v₀·sin θ] }, { title: "Let it fall", body: "Sideways stays steady. Gravity only reshapes the vertical part.", eq: [<>x = vₓ·t, <>y = ·t − ½gt²] }, { title: "Predict it", body: "Find when y returns to zero and the whole flight follows.", eq: [<>R = v₀²·sin(2θ) / g, <>H = ² / 2g, <>T = 2 / g] }, ]; return (

Three ideas cover every arc, from a free throw to a moon shot.

{cards.map((cd, i) => (

{i + 1}

{cd.title}

{cd.body}

{cd.eq.map((e, k) =>

{e}

)}

))}

); } const rp = { wrap: "flex flex-col gap-6", grid: "grid gap-4 md:grid-cols-3", card: "flex flex-col gap-2 pb-3", num: "font-mono text-sm font-bold text-primary", title: "text-2xl font-bold tracking-tight", body: "text-base text-muted-foreground", eqs: "font-mono text-base font-bold bg-muted rounded-md px-3 py-2 flex flex-col gap-1", ctas: "flex flex-wrap gap-3", }; // ---------- deck ---------- const TITLES = ["Why it curves", "Split the launch", "Gravity pulls down", "The lab", "45° flies farthest", "Challenge", "Recap"]; function Enter({ dir, children }) { const [on, setOn] = useState(false); useEffect(() => { const r = requestAnimationFrame(() => setOn(true)); return () => cancelAnimationFrame(r); }, []); const cls = on ? en.on : dir < 0 ? en.fromLeft : en.fromRight; return

{children}

; } const en = { on: "opacity-100 translate-x-0 transition duration-500 ease-out", fromRight: "opacity-0 translate-x-8", fromLeft: "opacity-0 -translate-x-8", }; function isTypingOrSlider(el) { if (!(el instanceof HTMLElement)) return false; return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable; } export default function App() { const [idx, setIdx] = useState(0); const [dir, setDir] = useState(1); const [lab, setLab] = useState({ v0: 25, deg: 45, g: 9.81 }); const narrow = useNarrow(); // The lesson saves nothing; it only reads its optional intro card. const { useLiveQuery } = useFireproof("projectile-lab"); const { docs: introDocs } = useLiveQuery("type", { key: "lesson-intro" }); const intro = introDocs[0]; const swipe = useRef(null); const last = TITLES.length - 1; const goTo = (i) => { const n = Math.max(0, Math.min(last, i)); if (n === idx) return; setDir(n > idx ? 1 : -1); setIdx(n); window.scrollTo({ top: 0 }); }; const next = () => goTo(idx + 1); const prev = () => goTo(idx - 1); useEffect(() => { function handleKeyDown(event) { if (isTypingOrSlider(event.target)) return; if (event.key === "ArrowRight" || event.key === "PageDown") { event.preventDefault(); goTo(idx + 1); } if (event.key === "ArrowLeft" || event.key === "PageUp") { event.preventDefault(); goTo(idx - 1); } } window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }); const onTouchStart = (e) => { const el = e.target; if (el instanceof Element && el.closest("input, button")) { swipe.current = null; return; } const tch = e.touches[0]; swipe.current = { x: tch.clientX, y: tch.clientY }; }; const onTouchEnd = (e) => { if (!swipe.current) return; const tch = e.changedTouches[0]; const dx = tch.clientX - swipe.current.x, dy = tch.clientY - swipe.current.y; swipe.current = null; if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) (dx < 0 ? next : prev)(); }; const slides = [ , , , , , , , ]; const c = { page: "min-h-screen bg-background text-foreground font-sans flex flex-col", bar: "sticky top-0 z-10 bg-background border-b border-border", barInner: "max-w-6xl mx-auto w-full px-4 sm:px-6 py-3 flex flex-col gap-3", barRow: "flex items-center justify-between gap-3", brand: "flex items-baseline gap-2 min-w-0", brandName: "text-lg font-bold tracking-tight uppercase whitespace-nowrap", step: "hidden sm:inline text-sm text-muted-foreground truncate", navBtns: "flex items-center gap-1 flex-none", count: "font-mono text-sm font-bold tabular-nums whitespace-nowrap pr-2", dots: "flex gap-1", dotOn: "h-2 flex-1 rounded-sm bg-primary transition-colors", dotOff: "h-2 flex-1 rounded-sm bg-muted hover:bg-muted-foreground transition-colors", main: "flex-1 max-w-6xl mx-auto w-full px-4 sm:px-6 pt-5 pb-24 sm:pt-8", mainHero: "flex-1 max-w-6xl mx-auto w-full px-4 sm:px-6 pt-5 pb-24 sm:pt-8 lg:pb-16 flex flex-col lg:justify-center", footer: "flex items-center gap-3 pt-8", }; return (

Projectile Lab · {TITLES[idx]}

{idx + 1} / {TITLES.length} } onClick={prev} disabled={idx === 0} /> } onClick={next} disabled={idx === last} />

{slides[idx]} {idx > 0 && idx < last && (

)}

); }