Project switcher backdrop: live-city showcase + landing swirl#103
Merged
Conversation
Open the project switcher over a loaded city and it now hides the chrome, snaps the camera into a tight, low, auto-rotating hero shot of the whole city, and reveals it behind the overlay (a touch of blur + a hero-side scrim keep the text at AA contrast). Dismissing snaps back to the exact prior camera pose, selection, and open panels; actually switching projects lets the new city own its framing instead of restoring the old one. The framing is computed against the viewport the canvas is about to fill, not its current sidebar-constrained size, so the zoom is identical every time regardless of what was open. Honors prefers-reduced-motion (no spin). Also fixes a cold-boot chrome flash: the picker decision now runs pre-paint in main.tsx so the full-page landing covers the chrome from frame one. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace the flat/CSS-radial landing backdrop with a small WebGL layer that renders a domain-warped gem-palette gradient (LandingBackdrop): fbm noise warps the color sample point so the gems flow into organic curved bands, the look flat CSS radials can't produce. A positional sweep spreads all four gems across the frame at once; an energy mask keeps it mostly-dark with the color riding the ridges, and the central band stays calmer so the hero + cards read. Theme-aware (resolves the --cc-gem-* tokens), honors prefers-reduced-motion (renders one static frame), non-interactive, cold-boot landing only (the modal still shows the live city). No CSS fallback: without WebGL the city can't render anyway, so the canvas just stays transparent over .landing's flat fill. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reworks the project switcher's backdrop in both of its modes.
Switcher over a loaded city (modal)
Opening the switcher over a loaded city now turns the live city into the backdrop:
prefers-reduced-motion(no spin).Driven by a small view-layer controller (
useSwitcherShowcase/SWITCHER_SHOWCASE) plus a showcase API on the camera rig; the city instance and all UI state stay mounted, so restore is a snapshot/replay, not a rebuild.Cold-boot landing
The full-page landing gets a new backdrop: a WebGL domain-warped gradient (
LandingBackdrop) — fbm noise warps a gem-palette color ramp into flowing organic bands (the "dark swirl" look flat CSS radial gradients can't do). Theme-aware (reads the--cc-gem-*tokens),prefers-reduced-motionaware (static frame), cold-boot only.Also
main.tsxso the full-page landing covers the chrome from frame one.Follow-up
Verification
just lint+just testgreen (2512 app tests, incl. the ProjectsView a11y audit). Visual pass by the author across cold-boot, the modal-over-city showcase, dismiss/restore, a real project switch, and reduced-motion.🤖 Generated with Claude Code