// components.jsx — Erudity landing components. // Exposes: BrainMark, Header, Hero, Roulette, FlyingCards, Download, Footer const { useState, useEffect, useRef, useMemo } = React; // Capture campaign UTMs from the inbound URL once at script load so every // store-badge href on the page carries them through to /download/*, where // the server turns them into Apple `pt`/`ct` and Play `referrer` params. // See ERU-66 and infrastructure/cloud_run_services/website/ATTRIBUTION.md. const ATTRIBUTION_QUERY = (() => { const inbound = new URLSearchParams(window.location.search); const outbound = new URLSearchParams(); for (const key of ['utm_source', 'utm_medium', 'utm_campaign']) { const value = inbound.get(key); if (value) outbound.set(key, value); } const serialized = outbound.toString(); return serialized ? `?${serialized}` : ''; })(); // ───────────────────────────────────────────────────────── // Brand mark — purple brain, used in header & footer // ───────────────────────────────────────────────────────── function BrainMark({ size = 22, color = "currentColor" }) { // Real Erudity brand mark — lib/resources/erudity_logo.svg return ( ); } // ───────────────────────────────────────────────────────── // Header // ───────────────────────────────────────────────────────── function Header({ theme, onToggleTheme, onJoin }) { return (
ERUDITY
); } // ───────────────────────────────────────────────────────── // Hero // ───────────────────────────────────────────────────────── function Hero() { return (
Available on iOS & Android

Learn anything. Actually anything.

Discover fascinating facts about any subject you can think of.
From "Ancient Rome" to "History of competitive eating" — the world is your syllabus.

Scroll
); } // ───────────────────────────────────────────────────────── // Roulette — three styles // ───────────────────────────────────────────────────────── function SlotRoulette({ subjects, secondsPerItem = 0.8 }) { // Continuous vertical scroll — no flicker, no pause. Always readable. // Strip is duplicated; we scroll one full copy then loop seamlessly. const ITEM_H = 84; const totalH = subjects.length * ITEM_H; const duration = subjects.length * secondsPerItem; const animName = `slotScroll_${subjects.length}_${ITEM_H}`; const keyframes = ` @keyframes ${animName} { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -${totalH}px, 0); } } `; const stripStyle = { animation: `${animName} ${duration}s linear infinite` }; return (
{[...subjects, ...subjects].map((s, i) => (
{s}
))}
); } function TickerRoulette({ subjects, speed = 3600 }) { // Horizontal ticker — center one highlighted const [centerIdx, setCenterIdx] = useState(0); useEffect(() => { const id = setInterval(() => setCenterIdx((p) => (p + 1) % subjects.length), speed); return () => clearInterval(id); }, [subjects.length, speed]); const visible = useMemo(() => { return [-2, -1, 0, 1, 2].map((offset) => ({ offset, subject: subjects[(centerIdx + offset + subjects.length * 5) % subjects.length], })); }, [centerIdx, subjects]); return (
{visible.map(({ offset, subject }) => (
{subject}
))}
); } function FadeRoulette({ subjects, speed = 3600 }) { // Calm fade-cycling const [idx, setIdx] = useState(0); useEffect(() => { const id = setInterval(() => setIdx((p) => (p + 1) % subjects.length), speed); return () => clearInterval(id); }, [subjects.length, speed]); return (
{subjects.map((s, i) => (
{s}
))}
); } function Roulette({ subjects, variant, onJoin }) { const Inner = variant === 'ticker' ? TickerRoulette : variant === 'fade' ? FadeRoulette : SlotRoulette; return (
Think of a subject — any subject

What would you like to learn?

See examples
); } // ───────────────────────────────────────────────────────── // Flying Cards on scroll — imperative rAF for 60fps // ───────────────────────────────────────────────────────── const clamp = (v, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v)); const easeOut = (t) => 1 - Math.pow(1 - t, 3); const lerp = (a, b, t) => a + (b - a) * t; // Per-card exit direction so cards fly off in varied upward diagonals instead // of all straight up. xFrac is fraction of viewport width; rZ is matching tilt. const EXIT_DIRS = [ { x: -0.55, rZ: -14 }, { x: 0.65, rZ: 16 }, { x: -0.7, rZ: -18 }, { x: 0.4, rZ: 10 }, { x: -0.3, rZ: -8 }, { x: 0.6, rZ: 20 }, { x: -0.5, rZ: -12 }, ]; // Stack-of-cards. Scroll determines which card is *active* (a discrete index); // the actual fly-off animation is owned by CSS transitions on `.is-gone` so it // always plays smoothly to completion regardless of where the user stops // scrolling. Cards are stacked at the same centered position — only the active // one is visible (`.is-active`), all others sit at opacity 0 underneath. The // final card is the marketing hook and never enters the gone state. function FlyingCards({ questions }) { const trackRef = useRef(null); const introRef = useRef(null); const cardRefs = useRef([]); const total = questions.length; const activeRef = useRef(0); // last applied active index — gates className updates useEffect(() => { const track = trackRef.current; if (!track) return; let raf = null; const applyActive = (next) => { for (let i = 0; i < total; i++) { const el = cardRefs.current[i]; if (!el) continue; // Three states encoded as classes: // i < next : .is-gone (already flown off — CSS transition runs to off-screen) // i == next : .is-active (visible at center) // i > next : (no class) (sitting underneath, opacity 0 in CSS) el.classList.toggle('is-gone', i < next); el.classList.toggle('is-active', i === next); } }; const update = () => { raf = null; const rect = track.getBoundingClientRect(); const totalH = rect.height - window.innerHeight; const progress = totalH > 0 ? clamp(-rect.top / totalH, 0, 1) : 0; // Pinned intro headline fades over the last sliver of scroll, just before // the marketing card takes the stage on its own. if (introRef.current) { introRef.current.style.opacity = clamp((0.95 - progress) / 0.1, 0, 1); } // Discrete active index — each card owns 1/total of the scroll length. // Crossing a threshold flips the class; CSS handles the rest. const next = Math.min(total - 1, Math.floor(progress * total)); if (next !== activeRef.current) { activeRef.current = next; applyActive(next); } }; // Card sizing in JS, applied as inline style. The CSS-based approach // (lvh / var(--cards-vh) inside min()) wasn't reliably re-evaluating on // window resize for elements inside a sticky ancestor — inline styles // always win and recompute every resize event. const computeCardSize = () => { const vw = window.innerWidth; if (vw <= 720) { // Mobile: width-only sizing. Mobile browsers fire `resize` whenever // their address bar shows/hides on scroll, so anything depending on // window.innerHeight would resize the card mid-scroll. Phones are // always full-screen anyway, so vw alone is sufficient. return { w: Math.max(180, Math.min(320, vw * 0.68)), h: Math.max(280, Math.min(560, vw * 1.20)), }; } // Desktop: bound by vh too so windowed browsers don't push the card // into the headline. Aspect 30/54 ≈ 0.56. const vh = window.innerHeight; return { w: Math.max(180, Math.min(380, vw * 0.26, vh * 0.30)), h: Math.max(320, Math.min(680, vw * 0.46, vh * 0.54)), }; }; const applyCardSizes = () => { const sz = computeCardSize(); for (let i = 0; i < total; i++) { const el = cardRefs.current[i]; if (!el) continue; el.style.width = `${sz.w}px`; el.style.height = `${sz.h}px`; } }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); }; const onResize = () => { applyCardSizes(); if (raf == null) raf = requestAnimationFrame(update); }; applyCardSizes(); // Apply correct active classes on mount (in case page loads scrolled). activeRef.current = -1; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); update(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); if (raf) cancelAnimationFrame(raf); }; }, [questions, total]); return (
Endless rabbit holes

From personal finance to modern rocketry.

{questions.map((q, i) => { const dir = EXIT_DIRS[i % EXIT_DIRS.length]; return (
{ cardRefs.current[i] = el; }} // Card 0 starts active so the page renders with it visible // before JS runs. JS will reconcile if scrolled deeper. className={i === 0 ? 'fly-card is-active' : 'fly-card'} style={{ // Higher z-index on earlier cards so the active one paints // over the upcoming cards (which sit underneath at opacity 0). zIndex: total - i, // Per-card diagonal exit direction (consumed by CSS .is-gone). '--exit-x': `${dir.x * 100}vw`, '--exit-rz': `${dir.rZ}deg`, }} >
{q.eyebrow}
QUESTION
{q.q}
); })}
); } // ───────────────────────────────────────────────────────── // Download // ───────────────────────────────────────────────────────── const Download = React.forwardRef(function Download({ }, ref) { return (
Ready when you are.

Erudity is out on iOS & Android.

Pick a subject. Get a course in seconds.

); }); // ───────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────── function Footer() { return ( ); } // Expose Object.assign(window, { BrainMark, Header, Hero, Roulette, FlyingCards, Download, Footer });