fix(web): restore full starfield view after zoom-out

[JustAGhosT]

Symptom

After zooming into a focus-area sun and clicking Zoom Out, the starfield looked collapsed to one side — most suns hidden, planets missing, background dimmed, a vignette and the focused sun's orbit ring still showing. It stayed that way (not a transient).

Root cause

The camera was a red herring — instrumented telemetry shows it recenters perfectly to (cx 0.5, cy 0.5, zoom 1) on zoom-out. The real bug: the animation render loop kept rendering in "focused mode" because it read a stale focusedSunId.

focusedSunId is fed to the loop through the animationParams useMemo, which lags focus changes — so props.focusedSunId stayed "…-sun" even after React had cleared focus (the Zoom Out button, gated on focusedSunId, had already unmounted). Focus-mode rendering branches (if (props.focusedSunId)) therefore stayed active:

• background stars dimmed + star-birthplaces/black-holes hidden,
• vignette + focus orbit-ring overlays,
• planet filter showing only the focused sun's planets.

Fix

Sync focusedSunId into a live ref (focusedSunIdRef) on every change — mirroring the existing hoveredSunIdRef pattern in this same component — and have the loop read the ref instead of the memoised prop. Its null (= "no focus") is used directly; it only falls back to the prop if the ref is unwired (defensive). 3 files, +29/-8.

Verification (headless, against the production build)

Clicking the real sun positions to trigger an actual zoom, then the DOM Zoom Out button:

state	camera	focus (loop)	planets rendered
default	(0.5, 0.5, 1)	null	14 / 14
zoomed into a sun	(0.83, 0.43, 1.8)	fintech-blockchain-sun	2 / 14
after zoom-out	(0.5, 0.5, 1)	null ✅	14 / 14 ✅

Before the fix the loop reported focus = "…-sun" and 2/14 planets after zoom-out (focus-mode stuck on); after the fix it's null and 14/14, and the screenshot shows the full centred starfield restored.

Note on #219

PR #219 (camera-transform offset fade) was based on a misdiagnosis — the transform was never the cause. It's harmless (identity at the resting state) and left in place; can be reverted separately if desired.

Summary by CodeRabbit

• Bug Fixes
  • Improved responsiveness of focused-mode rendering in the starfield by ensuring the animation loop reads the latest focus state synchronously, eliminating visual lag when switching between focused suns and preventing state-related display inconsistencies during zoom interactions.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0aa8243b-bc2d-4f04-b7ac-5c2b87cf1b23

📥 Commits

Reviewing files that changed from the base of the PR and between b67d12b and 8934f17.

📒 Files selected for processing (3)

• apps/web/src/features/layout/components/Starfield/Starfield.tsx
• apps/web/src/features/layout/components/Starfield/hooks/animation/animate.ts
• apps/web/src/features/layout/components/Starfield/hooks/animation/types.ts

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

---

📝 Walkthrough

Walkthrough

Starfield.tsx introduces a focusedSunIdRef kept in sync with focusedSunId via a useEffect, then passes this ref into animationParams. AnimationProps in types.ts gains an optional focusedSunIdRef field. animate.ts derives liveFocusedSunId from the ref each frame, replacing all prior direct reads of props.focusedSunId in rendering conditionals.

Changes

Live focusedSunId ref for animation loop

Layer / File(s)	Summary
Ref type contract and wiring into animationParams apps/web/src/features/layout/components/Starfield/hooks/animation/types.ts, apps/web/src/features/layout/components/Starfield/Starfield.tsx	AnimationProps adds an optional focusedSunIdRef?: MutableRefObject<string | null> field. Starfield creates the ref, syncs it to focusedSunId in an effect, and includes it in the animationParams object passed to the loop.
Animation loop: derive liveFocusedSunId and update all render branches apps/web/src/features/layout/components/Starfield/hooks/animation/animate.ts	At the top of each frame, liveFocusedSunId is read from focusedSunIdRef.current (falling back to props.focusedSunId if the ref is absent). All five rendering branches—background-star dimming, star-birthplace guard, drawSuns argument, black-hole suppression, and planet-filter cache invalidation—switch from props.focusedSunId to liveFocusedSunId.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 A stale ref once tricked the stars at night,
The focused sun blinked in and out of sight.
Now a useEffect keeps the ref in sync,
Each frame reads live — no lag, no missing link.
The cosmos renders crisp at every blink! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/starfield-zoom-out-recenter

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}