// Big, interactive Science section.
// Replaces the small "You forget 80%..." block.
//
// What it does:
// • Hero stat — animates 100 → 20 ("80% gone in 7 days") with a draining ring.
// • Big interactive chart — drag the day-handle (0–30) and watch retention
// react live on both curves. Toggle "Add reviews" to compare.
// • Stat readout under the chart updates with the handle.
// • Three small "what spaced repetition does" cards underneath.
//
// All built with the existing palette (var(--blue), --line, --muted, etc.) so
// it inherits light/dark themes automatically.
const SI_W = 920, SI_H = 480;
const SI_PAD_L = 64, SI_PAD_R = 32, SI_PAD_T = 40, SI_PAD_B = 80;
const SI_INNER_W = SI_W - SI_PAD_L - SI_PAD_R;
const SI_INNER_H = SI_H - SI_PAD_T - SI_PAD_B;
const SI_DAYS = 30;
const SI_REVIEWS = [1, 3, 7, 16, 30];
// Build curve once at module load — no need to recompute per render
const buildNoReview = () => {
const arr = [];
for (let i = 0; i <= 200; i++) {
const x = (i / 200) * SI_DAYS;
const y = 0.18 + 0.82 * Math.exp(-x / 3.5);
arr.push([x, y]);
}
return arr;
};
const buildWithReview = () => {
const arr = [];
for (let i = 0; i <= 400; i++) {
const x = (i / 400) * SI_DAYS;
let activeReview = 0, activeDecay = 3.5;
for (let r = 0; r < SI_REVIEWS.length; r++) {
if (x >= SI_REVIEWS[r]) {
activeReview = SI_REVIEWS[r];
activeDecay = 3.5 + r * 4;
}
}
const dx = x - activeReview;
const y = 0.2 + 0.8 * Math.exp(-dx / activeDecay);
arr.push([x, y]);
}
return arr;
};
const SI_CURVE_NO = buildNoReview();
const SI_CURVE_YES = buildWithReview();
// Analytic versions of the curve functions — used for the live readouts
// so values match the rendered curve EXACTLY at any day, including at
// the rep step boundaries (where sample interpolation would smooth across
// the discontinuity and lie about retention).
const noReviewYAt = (day) => 0.18 + 0.82 * Math.exp(-day / 3.5);
const withReviewYAt = (day) => {
let activeReview = 0, activeDecay = 3.5;
for (let r = 0; r < SI_REVIEWS.length; r++) {
if (day >= SI_REVIEWS[r]) {
activeReview = SI_REVIEWS[r];
activeDecay = 3.5 + r * 4;
}
}
const dx = day - activeReview;
return 0.2 + 0.8 * Math.exp(-dx / activeDecay);
};
const siXScale = (x) => SI_PAD_L + (x / SI_DAYS) * SI_INNER_W;
const siYScale = (y) => SI_PAD_T + (1 - y) * SI_INNER_H;
const yAtDay = (curve, day) => {
// linear interp between nearest two samples
const stepDays = SI_DAYS / (curve.length - 1);
const idx = Math.min(curve.length - 2, Math.floor(day / stepDays));
const [x0, y0] = curve[idx];
const [x1, y1] = curve[idx + 1];
const t = (day - x0) / (x1 - x0);
return y0 + (y1 - y0) * t;
};
// Big animated counter for the hero stat
const SiStatCounter = ({ from = 100, to = 20, durationMs = 1800, suffix = "%", inView }) => {
const [val, setVal] = React.useState(from);
React.useEffect(() => {
if (!inView) return;
let raf, start;
const tick = (ts) => {
if (!start) start = ts;
const p = Math.min((ts - start) / durationMs, 1);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(from + (to - from) * eased));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [inView, from, to, durationMs]);
return <>{val}{suffix};
};
// Drainable ring next to the hero stat — fills from 100% → 20%
// Animation duration must match SiStatCounter's so the ring drains exactly
// in lock-step with the number ticking down.
const SiDrainRing = ({ inView, durationMs = 1800 }) => {
const [pct, setPct] = React.useState(1);
React.useEffect(() => {
if (!inView) return;
let raf, start;
const tick = (ts) => {
if (!start) start = ts;
const p = Math.min((ts - start) / durationMs, 1);
const eased = 1 - Math.pow(1 - p, 3);
setPct(1 - eased * 0.8); // 1 → 0.2
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [inView, durationMs]);
const r = 80, c = 2 * Math.PI * r;
return (
);
};
const ScienceInteractive = () => {
const heroRef = React.useRef(null);
const chartRef = React.useRef(null);
const [heroInView, setHeroInView] = React.useState(false);
const [chartInView, setChartInView] = React.useState(false);
const [day, setDay] = React.useState(7); // current handle position
const [showReviews, setShowReviews] = React.useState(false);
const [draggedOnce, setDraggedOnce] = React.useState(false);
const dragRef = React.useRef(null);
const [drawT, setDrawT] = React.useState(0); // 0 → 1, draw-in animation
// Observe each block independently — hero animates when hero is on screen,
// chart animates only when the chart card is properly in view. With a tall
// section, observing the whole thing fires too eagerly.
React.useEffect(() => {
const el = heroRef.current;
if (!el) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) setHeroInView(true);
}, { threshold: 0.6 });
obs.observe(el);
return () => obs.disconnect();
}, []);
React.useEffect(() => {
const el = chartRef.current;
if (!el) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) setChartInView(true);
}, { threshold: 0.5 });
obs.observe(el);
return () => obs.disconnect();
}, []);
// Curve draw-in animation — fires when chart enters view
React.useEffect(() => {
if (!chartInView) return;
let raf, start;
const tick = (ts) => {
if (!start) start = ts;
const p = Math.min((ts - start) / 1600, 1);
setDrawT(1 - Math.pow(1 - p, 3));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [chartInView]);
// Auto-toggle reviews on after the curve has drawn
React.useEffect(() => {
if (!chartInView) return;
const tm = setTimeout(() => setShowReviews(true), 3800);
return () => clearTimeout(tm);
}, [chartInView]);
// Drag interaction on the chart
const onPointerDown = (e) => {
if (!dragRef.current) return;
const move = (clientX) => {
const rect = dragRef.current.getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
// Convert pixel ratio to day ratio (account for the SVG inner padding)
const innerRatio = (ratio * SI_W - SI_PAD_L) / SI_INNER_W;
const clamped = Math.max(0, Math.min(SI_DAYS, innerRatio * SI_DAYS));
// Snap to integer days for a discrete feel — keeps the handle
// landing on rep points instead of dipping between them.
setDay(Math.round(clamped));
setDraggedOnce(true);
};
move(e.clientX);
const onMove = (ev) => move(ev.clientX);
const onUp = () => {
window.removeEventListener("pointermove", onMove);
window.removeEventListener("pointerup", onUp);
};
window.addEventListener("pointermove", onMove);
window.addEventListener("pointerup", onUp);
};
// Path builder w/ draw-in clip
const visibleX = drawT * SI_DAYS;
const buildPath = (curve) => {
const visible = curve.filter(([x]) => x <= visibleX);
if (!visible.length) return "";
return visible
.map(([x, y], i) => `${i === 0 ? "M" : "L"} ${siXScale(x).toFixed(1)} ${siYScale(y).toFixed(1)}`)
.join(" ");
};
const fillPath = (curve) => {
const visible = curve.filter(([x]) => x <= visibleX);
if (!visible.length) return "";
const path = visible
.map(([x, y], i) => `${i === 0 ? "M" : "L"} ${siXScale(x).toFixed(1)} ${siYScale(y).toFixed(1)}`)
.join(" ");
const lastX = visible[visible.length - 1][0];
return `${path} L ${siXScale(lastX).toFixed(1)} ${siYScale(0).toFixed(1)} L ${siXScale(0).toFixed(1)} ${siYScale(0).toFixed(1)} Z`;
};
const yNo = noReviewYAt(day);
const yYes = withReviewYAt(day);
const dayLabels = [0, 7, 14, 21, 30];
const yLabels = [
{ y: 1, label: "100%" },
{ y: 0.5, label: "50%" },
{ y: 0.2, label: "20%" }
];
return (
{/* Hero block — giant stat + headline + drain ring */}
The science
That's all you'll rememberof what you read two weeks ago.
Hermann Ebbinghaus measured this in 1885. The curve hasn't changed.
Spaced repetition is how you bend it.
retained · day 14
{/* The big interactive chart */}
Drag to scrub through 30 days
The forgetting curve, live.
{/* Live readout strip */}
After day {Math.round(day)}
{Math.round(yNo * 100)}%
without review
→
With Never Forget
{Math.round(yYes * 100)}%
retained
That's
{yNo > 0.001 ? `${(yYes / yNo).toFixed(1)}×` : "—"}
more, on day {Math.round(day)}
*Numbers are illustrative, derived from the Ebbinghaus forgetting curve and a typical spaced-repetition schedule (reviews on days 1, 3, 7, 16, 30). Real-world retention varies by material and learner.
{/* Three explanation cards */}
01
Reviews catch decay early
Each rep resets your retention near 100% and slows the decay that
follows. The curve gets flatter every time.
02
Intervals stretch as you learn
Day 1, day 3, day 7, day 16, day 30. Memories that survive each gap
earn longer ones — the schedule does the math.
03
A few minutes beats hours of cramming
Five short reviews, spaced over a month, retain more than five hours
in one sitting. Time on task isn't the metric — timing is.