[P2] Optimize runtime animations + add lazy/next-image loading

[AndresL230]

Severity: P2 · Dimension: Performance · From docs/frontend-ui-audit.md

Bundle/lazy-load discipline is strong (three.js, mermaid, d3, MarkdownChat all lazy-loaded; expensive components memoized). The gaps are hand-rolled runtime animation and images bypassing Next's pipeline.

Animation hot spots

• Landing hero canvas — page.tsx:404-446 — 60fps RAF runs a nested O(N²) link pass over all nodes and sets ctx.shadowBlur per node (very expensive). No prefers-reduced-motion guard anywhere in page.tsx — reduced-motion users still burn full CPU/GPU. → gate RAF behind reduced-motion; drop shadowBlur for a pre-rendered glow sprite; cap the link pass.
• Floating-cards RAF — page.tsx:507-516 — calls querySelectorAll('.floating-card') + re-parses dataset floats every frame. → resolve the NodeList + parse once.
• AtmosphericBackdrop — AtmosphericBackdrop.tsx:93-139 (mounted app-wide via ShellFrame.tsx:30,66) — repaints 14 full-viewport radial gradients at 60fps on a CPU canvas, forever. Reduced-motion is handled; everyone else never throttles. → pre-bake each orb to an offscreen canvas + drawImage; consider ~30fps cadence.
• KnowledgeGraph2D — KnowledgeGraph2D.tsx:172-174,306 — d3 .on("tick", forceRerender) reconciles the whole SVG each tick; onPointerMove calls setTooltipPos on every move; edges do O(E·N) find() lookups (:397-398). → drive positions via refs/direct DOM writes; only set tooltip when hovered; precompute an id→node Map.
• Spotlight card — page.tsx:543-547 — getBoundingClientRect() on every mousemove (P3). → cache on mouseenter/resize.

Images

• No next/image anywhere; user-content images are raw <img> with no loading="lazy" / dimensions: Avatar.tsx:46, AvatarFrame.tsx:23, screens/Social.tsx:420, screens/Settings.tsx:855,867, screens/Admin.tsx:988, TopNav.tsx:169, SideNav.tsx:109. → add loading="lazy" + intrinsic width/height; consider a Cloudflare Images loader for next/image.

framer-motion (P3)

• Eagerly imported into the landing bundle + Study: HowItWorks.tsx:10 (rendered at page.tsx:917), screens/Study.tsx:5. → next/dynamic the motion subtrees or use the existing CSS keyframes.

Acceptance

• Landing animations respect prefers-reduced-motion; no per-node shadowBlur; no per-frame querySelectorAll
• Atmospheric orbs pre-baked / throttled
• KnowledgeGraph2D doesn't re-render the full SVG every tick/move
• Remote images have loading="lazy" + dimensions

[AndresL230]

Proposal — animation + image perf (B11, verified @ d1d724f)

Not implemented — proposal only. Re-verified every hot spot in the issue body; three of them are already fixed, so the remaining scope is smaller and sharper than the issue reads.

Already done (propose ticking these off)

• Landing canvas reduced-motion: handled — page.tsx:36 (REDUCED_MOTION_QUERY), :141 matchMedia, :144 gate, :253-260 live listener.
• Per-node shadowBlur: gone — grep -rn shadowBlur frontend/src returns zero hits.
• Floating-cards per-frame querySelectorAll: fixed — the NodeList and dataset floats are resolved once at :331-338.
• Spotlight getBoundingClientRect per mousemove: fixed (WeakMap cache, :409) — and now unreachable dead code anyway.

Still live, in priority order

1. Hero canvas O(N²) link pass — page.tsx:221-233: a double loop over 226 projected nodes ≈ 25,425 pair distance checks every frame, uncapped, plus a full map+sort projection at :209-217. This is the one unaddressed piece of hot spot 1. Pair this with [p1] frontend PRIORITY - Landing page redesign #344 phase 3 — same canvas.
2. AtmosphericBackdrop — AtmosphericBackdrop.tsx:102-118: 14 full-viewport radial gradients rebuilt every frame at 60fps, app-wide (mounted twice via ShellFrame.tsx:40,:83). Reduced-motion is handled (:74-79, :120); everyone else never throttles. → pre-bake each orb to an offscreen canvas + drawImage, and cap to ~30fps.
3. KnowledgeGraph2D — three separate issues: .on("tick", forceRerender) reconciles the whole SVG per tick (:184-186); setTooltipPos fires unconditionally on every pointermove, even with nothing hovered (:346-347); edges do O(E·N) find() lookups (:443-444). → refs/direct DOM writes for positions, gate the tooltip on hovered, precompute an id→node Map. (It does already pause offscreen via IntersectionObserver, :248-252.)
4. Images — next/image has zero usages repo-wide. Avatar/AvatarFrame/Admin are fully fixed; five sites have loading="lazy" but no intrinsic dimensions (Settings.tsx:890,903, Social.tsx:500, Admin.tsx:939, MarkdownChat.tsx:199, ReportIssueFlow.tsx:198); ~15 local sapling-icon.svg sites have neither. → add attrs. Recommend NOT adopting next/image here — it's a Cloudflare-Workers loader project of its own.
5. framer-motion eager imports — HowItWorks.tsx:3-11 (~60 motion.* elements, in the landing bundle via page.tsx:693), plus Study.tsx:5 and Calendar.tsx:4. → next/dynamic the motion subtrees.

Scope and risk

• ~1-1.5 days as one perf PR, with measurable acceptance (before/after DevTools frame cost) and no visual change.
• Low-medium risk. The KnowledgeGraph2D refactor is the sharp edge — it needs its vitest suite plus the graph journeys green, since it's the most e2e-asserted component in the app.
• Worth knowing: globals.css:489-496 is a global reduced-motion reset that neutralizes CSS animations only — which is exactly why these JS rAF guards had to be written by hand.