chore: remove background animations and GPU-rendered surfaces - #390
chore: remove background animations and GPU-rendered surfaces#390jinglescode wants to merge 1 commit into
Conversation
Removes all decorative background animation systems and their GPU rendering paths, verified against a production build: - Aurora CSS background (gradient orbs, conic sheen, keyframes) and its app-wide render in layout + homepage hero scroll-fade logic - MarbleField WebGL fragment-shader background - three.js globe (three-globe, @react-three/fiber, @react-three/drei): /globe route, homepage wrapper, api-docs backdrop, new-wallet-flow GlassMorphismPageWrapper backdrop - Appearance zustand store + user settings Appearance card (only served the background toggle/presets) - Unused deps: three, three-globe, @react-three/fiber, @react-three/drei, framer-motion (never imported) Content-level animations kept: Reveal, Typewriter, feature-icon SVG keyframes, loading skeletons, accordion/popup keyframes, token-flow 2D canvases. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01N9JfXsXwJsssLBcoLD48p9
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Superseded by #395, which keeps these surfaces but gates them on what the device can actually render. Same problem, different fix: instead of removing the aurora, the MarbleField shader and the three.js globe for everyone, #395 scores CPU cores, device memory, the unmasked GPU renderer, framebuffer size, handheld-ness, reduced-motion and data-saver into three tiers, then backs that heuristic with a frame-rate probe that steps the tier down when the page is not keeping budget. Weak and software-rendered devices end up where this PR put everyone — a static gradient, no WebGL — while capable ones keep the full set. The two wins from here that carried over: |
Summary
animate-aurora*keyframes) and its app-wide render inlayout.tsxplus the homepage hero scroll-fade logic/globeroute, homepage wrapper,api-docsbackdrop (and its backdrop-blur), and the new-wallet-flowGlassMorphismPageWrapperbackdrop (now a plain wrapper that only toggles the glass body class)three,three-globe,@react-three/fiber,@react-three/drei, andframer-motion(installed but never imported); lockfile re-syncedContent-level animations are kept: Reveal, Typewriter, feature-icon SVG keyframes, loading skeletons, tailwind accordion/popup keyframes, and the token-flow 2D canvases (functional data viz).
Test plan
npm run typecheckcleannpm run build(webpack) passes;/globeabsent from the route list/api-docsrender correctly, DOM probe shows 0 canvas/aurora/globe elements and 0 fixed background layers, no console errors/globereturns 404🤖 Generated with Claude Code
https://claude.ai/code/session_01N9JfXsXwJsssLBcoLD48p9