perf(frontend): #111 runtime animations + lazy/next-image loading

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.

frontend/eslint-suppressions.json

@@ -55,7 +55,7 @@
  "count": 1
  },
  "react-hooks/refs": {
- "count": 13
+ "count": 12
  }
  },
  "src/components/KnowledgeGraph3D.test.tsx": {

frontend/src/app/(public)/page.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/context/UserContext';
 import { useScrollLock } from '@/lib/useScrollLock';
 import { Network, Sparkles, FilePlus2, Brain, CalendarClock, Users, PenSquare } from 'lucide-react';
-import HowItWorks from '@/components/HowItWorks';
 import SignInModal from '@/components/SignInModal';
 import { HeroCard } from '@/components/HeroCard';
 import { BRAND_FOREST } from '@/lib/brand';
 import { Button } from "@/components/ui";
 import { IS_TEST_MODE, random, now } from '@/lib/testMode';
 
+// HowItWorks statically imports framer-motion, which a plain import would ride
+// into the landing chunk. next/dynamic splits it into its own client chunk
+// while still server-rendering the section's marketing copy (#492 review:
+// ssr:false would drop it from the HTML crawlers see — the one page where
+// that matters). The placeholder mirrors the section's own 340vh scroll
+// height so layout below doesn't shift during client-side chunk loads.
+const HowItWorks = dynamic(() => import('@/components/HowItWorks'), {
+ loading: () => <section id="how-it-works" className="landing-section relative" style={{ height: '340vh' }} />,
+});
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
@@ -219,12 +229,26 @@
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.lineWidth = 0.5;
+ // The pair walk itself is unavoidable (links depend on projected
+ // positions, which change every frame), but almost every pair fails the
+ // distance test — so make failing cheap: hoist the per-node threshold
+ // out of the inner loop, reject on |dx|/|dy| before multiplying, and
+ // compare squared distances so the sqrt only runs for pairs that
+ // actually draw a link.
  for (let i = 0; i < proj.length; i++) {
+ const p1 = proj[i];
+ const maxD = 70 * p1.sc;
+ const maxD2 = maxD * maxD;
+ const aScale = 0.15 * Math.min(1, p1.sc);
  for (let j = i + 1; j < proj.length; j++) {
- const p1 = proj[i], p2 = proj[j];
- const d = Math.hypot(p1.x - p2.x, p1.y - p2.y);
- if (d < 70 * p1.sc) {
- const a = (1 - d / (70 * p1.sc)) * 0.15 * Math.min(1, p1.sc);
+ const p2 = proj[j];
+ const dx = p1.x - p2.x;
+ if (dx > maxD || dx < -maxD) continue;
+ const dy = p1.y - p2.y;
+ if (dy > maxD || dy < -maxD) continue;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < maxD2) {
+ const a = (1 - Math.sqrt(d2) / maxD) * aScale;
  if (a > 0.002) {
  ctx.strokeStyle = `rgba(156,163,175,${a})`;
  ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
@@ -510,7 +534,7 @@
  >
  <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
  <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
  <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
  </button>
  <div className="flex items-center">
@@ -726,7 +750,7 @@
  <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
  <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
  <div className="flex items-center gap-2">
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
  <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
  </div>
  <div className="flex flex-wrap justify-center gap-6">
@@ -809,7 +833,7 @@
  display: 'flex', flexDirection: 'column', gap: 22,
  }}>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
  <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
  <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
  </div>
  <div>

frontend/src/app/globals.css

@@ -261,6 +261,10 @@ body { font-size: 14px; line-height: 1.5; }
 .fade-in { animation: fade-in var(--dur) var(--ease); }
 .slide-up { animation: slide-up var(--dur-slow) var(--ease); }
 .fade-up { animation: fade-in 0.5s var(--ease); animation-fill-mode: both; }
+/* Study mode-switch enter fade (#111/#490): CSS stand-in for the old
+ framer-motion crossfade so pane content never waits on the motion chunk. */
+@keyframes study-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.study-mode-enter { animation: study-mode-enter 0.22s cubic-bezier(0.2, 0.85, 0.35, 1); }
 
 /* Approval gate (#290) — the "you're in" beat.
  The sapling draws itself once and the message steps in behind it; the

frontend/src/components/AtmosphericBackdrop.tsx

@@ -13,6 +13,10 @@
  * - DPR-aware; redraws on window resize.
  * - 14 orbs, each with a slow 2D drift + pseudo-depth via scale + opacity.
  * - Opacity capped at 0.10; you feel them more than you see them.
+ * - Each orb's radial gradient is pre-baked to an offscreen sprite (#111);
+ * frames composite bitmaps via drawImage. Re-baked only on DPR change.
+ * - The RAF loop is throttled to ~30fps (imperceptible on this slow drift)
+ * and pauses entirely while the tab is hidden.
  * - Honors prefers-reduced-motion: paints one still frame, never animates.
  * - Palette is intentionally independent of the UI green so the brand's
  * accent keeps its exclusive semantic meaning (growth/mastery).
@@ -27,8 +31,14 @@ type Orb = {
  r: number;
  color: string;
  phase: number;
+ // Pre-baked gradient sprite; re-baked only when the DPR changes (#111).
+ sprite?: HTMLCanvasElement;
 };
 
+// ~30fps frame budget — plenty for a slow ambient drift (#111).
+const FRAME_MS = 1000 / 30;
+const SPRITE_MAX_PX = 512;
+
 // Warm, atmospheric palette — blues, purples, ambers, teals. Green is
 // reserved for UI branding, so it's intentionally absent here.
 const PALETTE = [
@@ -58,12 +68,42 @@ function makeOrbs(width: number, height: number): Orb[] {
  return orbs;
 }
 
+// Pre-bake one orb's radial gradient to an offscreen canvas so the animation
+// loop composites bitmaps with drawImage instead of re-creating full-viewport
+// gradients every frame (#111). Radius/alpha are fixed at orb creation, so
+// only a DPR change invalidates a sprite.
+function bakeSprite(orb: Orb, dpr: number): HTMLCanvasElement | undefined {
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ // Peak opacity 0.10 on the closest orbs; falls off with depth.
+ const alpha = 0.035 + orb.z * 0.07;
+ // Cap the sprite's backing resolution: at full device resolution the 14
+ // sprites cost ~100 MB of canvas memory at DPR 2 (#490 review). The
+ // gradients are soft, so drawImage upscaling from a capped sprite is
+ // visually indistinguishable at a fraction of the memory.
+ const size = Math.max(1, Math.min(Math.ceil(rad * 2 * dpr), SPRITE_MAX_PX));
+ const sprite = document.createElement("canvas");
+ sprite.width = size;
+ sprite.height = size;
+ const sctx = sprite.getContext("2d");
+ if (!sctx) return undefined;
+ const c = size / 2;
+ const grad = sctx.createRadialGradient(c, c, 0, c, c, c);
+ grad.addColorStop(0, hexToRgba(orb.color, alpha));
+ grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
+ grad.addColorStop(1, hexToRgba(orb.color, 0));
+ sctx.fillStyle = grad;
+ sctx.fillRect(0, 0, size, size);
+ return sprite;
+}
+
 export function AtmosphericBackdrop() {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const orbsRef = React.useRef<Orb[]>([]);
  const sizeRef = React.useRef<{ w: number; h: number; dpr: number }>({ w: 0, h: 0, dpr: 1 });
  const reducedMotionRef = React.useRef<boolean>(false);
+ const bakedDprRef = React.useRef<number | null>(null);
+ const lastFrameRef = React.useRef<number | null>(null);
 
  React.useEffect(() => {
  const canvas = canvasRef.current;
@@ -75,9 +115,33 @@ export function AtmosphericBackdrop() {
  // Test mode paints one still frame with seeded orbs — same path as
  // prefers-reduced-motion.
  reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
- const onReducedChange = () => { reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches; };
+ const onReducedChange = () => {
+ reducedMotionRef.current = IS_TEST_MODE || !!mql?.matches;
+ // Un-reducing must revive the loop explicitly: tick() parks itself on a
+ // still frame when reduced (the old always-running loop resumed
+ // implicitly, so without this the backdrop would stay frozen).
+ if (!reducedMotionRef.current && rafRef.current == null && !document.hidden) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
+ };
  mql?.addEventListener?.("change", onReducedChange);
 
+ const drawFrame = () => {
+ const { w, h } = sizeRef.current;
+ ctx.clearRect(0, 0, w, h);
+
+ // The pale-green background tint preserved — the backdrop must NOT
+ // paint a big opaque fill; the page's own --bg shows through. Each
+ // orb's gradient is pre-baked (see bakeSprite), so a frame is pure
+ // bitmap compositing.
+ for (const orb of orbsRef.current) {
+ if (!orb.sprite) continue;
+ const rad = orb.r * (0.7 + orb.z * 0.6);
+ ctx.drawImage(orb.sprite, orb.x - rad, orb.y - rad, rad * 2, rad * 2);
+ }
+ };
+
  const resize = () => {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const w = window.innerWidth;
@@ -89,62 +153,83 @@ export function AtmosphericBackdrop() {
  canvas.style.height = `${h}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (orbsRef.current.length === 0) orbsRef.current = makeOrbs(w, h);
+ // Orb sizes are fixed at creation, so a DPR change is the only thing
+ // that invalidates the pre-baked sprites.
+ if (bakedDprRef.current !== dpr) {
+ for (const orb of orbsRef.current) orb.sprite = bakeSprite(orb, dpr);
+ bakedDprRef.current = dpr;
+ }
+ // Setting canvas.width cleared the backing store; when the loop is
+ // parked (reduced motion) nothing else repaints, so do it here.
+ if (reducedMotionRef.current) drawFrame();
  };
  resize();
  window.addEventListener("resize", resize);
 
- const paint = (t: number) => {
+ // Slow drift, scaled by elapsed 60fps-equivalent frames so the ~30fps
+ // throttle keeps the same drift speed as the old per-frame step. Wrap
+ // orbs that float past the edges (with a soft margin so they don't pop
+ // in — the gradient tail handles the fade).
+ const step = (dtFrames: number) => {
  const { w, h } = sizeRef.current;
- ctx.clearRect(0, 0, w, h);
-
- // The pale-green background tint preserved — the backdrop must NOT
- // paint a big opaque fill; the page's own --bg shows through.
- for (const orb of orbsRef.current) {
- const x = orb.x;
- const y = orb.y;
- const rad = orb.r * (0.7 + orb.z * 0.6);
- // Peak opacity 0.10 on the closest orbs; falls off with depth.
- const alpha = 0.035 + orb.z * 0.07;
-
- const grad = ctx.createRadialGradient(x, y, 0, x, y, rad);
- grad.addColorStop(0, hexToRgba(orb.color, alpha));
- grad.addColorStop(0.55, hexToRgba(orb.color, alpha * 0.45));
- grad.addColorStop(1, hexToRgba(orb.color, 0));
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(x, y, rad, 0, Math.PI * 2);
- ctx.fill();
- }
-
- if (reducedMotionRef.current) return;
-
- // Slow drift. Wrap orbs that float past the edges (with a soft margin
- // so they don't pop in — the gradient tail handles the fade).
  for (const orb of orbsRef.current) {
- orb.phase += 0.0008;
- orb.x += orb.vx + Math.cos(orb.phase) * 0.04;
- orb.y += orb.vy + Math.sin(orb.phase * 0.8) * 0.03;
+ orb.phase += 0.0008 * dtFrames;
+ orb.x += (orb.vx + Math.cos(orb.phase) * 0.04) * dtFrames;
+ orb.y += (orb.vy + Math.sin(orb.phase * 0.8) * 0.03) * dtFrames;
  const m = orb.r;
  if (orb.x < -m) orb.x = w + m;
  else if (orb.x > w + m) orb.x = -m;
  if (orb.y < -m) orb.y = h + m;
  else if (orb.y > h + m) orb.y = -m;
  }
+ };
 
- rafRef.current = requestAnimationFrame(paint);
+ const tick = (t: number) => {
+ if (reducedMotionRef.current) {
+ // Paint one still frame only.
+ drawFrame();
+ rafRef.current = null;
+ return;
+ }
+ rafRef.current = requestAnimationFrame(tick);
+ const last = lastFrameRef.current;
+ // Throttle to ~30fps; the 1ms epsilon keeps 60Hz displays from
+ // slipping to every third frame on timestamp jitter.
+ if (last != null && t - last < FRAME_MS - 1) return;
+ // Clamp catch-up so a long RAF gap can't teleport the orbs.
+ const dtFrames = last == null ? 1 : Math.min((t - last) / (1000 / 60), 4);
+ lastFrameRef.current = t;
+ drawFrame();
+ step(dtFrames);
+ };
+
+ // Repainting a hidden tab is pure waste — pause the loop entirely and
+ // resume (without integrating the hidden gap into the drift) when the
+ // tab becomes visible again.
+ const onVisibility = () => {
+ if (document.hidden) {
+ if (rafRef.current != null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ } else if (!reducedMotionRef.current && rafRef.current == null) {
+ lastFrameRef.current = null;
+ rafRef.current = requestAnimationFrame(tick);
+ }
  };
+ document.addEventListener("visibilitychange", onVisibility);
 
  if (reducedMotionRef.current) {
  // Paint one still frame only.
-paint(0);
+drawFrame();
  } else {
- rafRef.current = requestAnimationFrame(paint);
+ rafRef.current = requestAnimationFrame(tick);
  }
 
  return () => {
  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  window.removeEventListener("resize", resize);
+ document.removeEventListener("visibilitychange", onVisibility);
  mql?.removeEventListener?.("change", onReducedChange);
  };
  }, []);

frontend/src/components/KnowledgeGraph2D.testmode.test.tsx

@@ -51,17 +51,25 @@ const EDGES: GraphEdge[] = [
  { source: "a", target: "d", strength: 0.7 },
 ];
 
-/** Every rendered circle + edge coordinate, as attribute strings. */
+/**
+ * Every rendered node position + edge coordinate, as attribute strings.
+ * Node positions live on the group's `transform` (#111 moved the per-tick
+ * writes off React: children sit at relative cx/cy 0 and the group carries
+ * the translate); circle radii are kept so size regressions still surface.
+ */
 function snapshot(container: HTMLElement): string[] {
  const svg = container.querySelector("svg");
  expect(svg).not.toBeNull();
+ const groups = Array.from(svg!.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => `n:${g.getAttribute("transform")}`,
+ );
  const circles = Array.from(svg!.querySelectorAll("circle")).map(
  (c) => `c:${c.getAttribute("cx")},${c.getAttribute("cy")},${c.getAttribute("r")}`,
  );
  const lines = Array.from(svg!.querySelectorAll("line")).map(
  (l) => `l:${l.getAttribute("x1")},${l.getAttribute("y1")},${l.getAttribute("x2")},${l.getAttribute("y2")}`,
  );
- return [...circles, ...lines];
+ return [...groups, ...circles, ...lines];
 }
 
 describe("KnowledgeGraph2D — test-mode determinism", () => {
@@ -72,6 +80,7 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  const snap1 = snapshot(first.container);
  // The simulation must have actually laid out and rendered content.
  expect(snap1.length).toBeGreaterThan(0);
+ expect(snap1.some((s) => s.startsWith("n:"))).toBe(true);
  expect(snap1.some((s) => s.startsWith("l:"))).toBe(true);
  for (const s of snap1) {
  expect(s).not.toMatch(/NaN|null|undefined/);
@@ -92,8 +101,8 @@ describe("KnowledgeGraph2D — test-mode determinism", () => {
  <KnowledgeGraph2D nodes={NODES} edges={EDGES} width={600} height={480} />,
  );
  const centers = new Set(
- Array.from(container.querySelectorAll("circle")).map(
- (c) => `${c.getAttribute("cx")},${c.getAttribute("cy")}`,
+ Array.from(container.querySelectorAll('[data-testid="graph-node"]')).map(
+ (g) => g.getAttribute("transform"),
  ),
  );
  // 5 nodes must occupy at least 5 distinct positions once settled.