perf: prefetch background chunk on page load from localStorage cache

- Add prefetchBackground() to registry — triggers dynamic import
  without creating React component
- Call prefetch at module init in BackgroundRenderer using cached
  config from localStorage, before React renders
- Background JS chunk starts downloading immediately instead of
  waiting for Suspense to trigger lazy() import

src/components/backgrounds/BackgroundRenderer.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { brandingApi } from '@/api/branding';
 import type { AnimationConfig, BackgroundType } from '@/components/ui/backgrounds/types';
 import { DEFAULT_ANIMATION_CONFIG } from '@/components/ui/backgrounds/types';
-import { backgroundComponents } from '@/components/ui/backgrounds/registry';
+import { backgroundComponents, prefetchBackground } from '@/components/ui/backgrounds/registry';
 
 const ANIMATION_CACHE_KEY = 'cabinet_animation_config';
 
@@ -16,6 +16,14 @@ function getCachedConfig(): AnimationConfig | null {
   }
 }
 
+// Prefetch the background JS chunk immediately based on localStorage cache.
+// This starts the download before React even renders, so by the time
+// Suspense needs the component, the chunk is already loaded.
+const cachedConfig = getCachedConfig();
+if (cachedConfig?.enabled && cachedConfig.type && cachedConfig.type !== 'none') {
+  prefetchBackground(cachedConfig.type);
+}
+
 function setCachedConfig(config: AnimationConfig) {
   try {
     localStorage.setItem(ANIMATION_CACHE_KEY, JSON.stringify(config));

src/components/ui/backgrounds/registry.ts

@@ -1,6 +1,32 @@
 import { lazy, type ComponentType } from 'react';
 import type { BackgroundType, BackgroundDefinition } from './types';
 
+// Raw import functions for prefetching (doesn't create React components)
+const backgroundImports: Record<Exclude<BackgroundType, 'none'>, () => Promise<unknown>> = {
+  aurora: () => import('./aurora-background'),
+  sparkles: () => import('./sparkles'),
+  vortex: () => import('./vortex'),
+  'shooting-stars': () => import('./shooting-stars'),
+  'background-beams': () => import('./background-beams'),
+  'background-beams-collision': () => import('./background-beams-collision'),
+  'gradient-animation': () => import('./background-gradient-animation'),
+  wavy: () => import('./wavy-background'),
+  'background-lines': () => import('./background-lines'),
+  boxes: () => import('./background-boxes'),
+  meteors: () => import('./meteors'),
+  grid: () => import('./grid-background'),
+  dots: () => import('./grid-background'),
+  spotlight: () => import('./spotlight-bg'),
+  ripple: () => import('./background-ripple'),
+};
+
+/** Prefetch the JS chunk for a background type (call early to avoid lazy-load delay) */
+export function prefetchBackground(type: BackgroundType): void {
+  if (type !== 'none' && backgroundImports[type]) {
+    backgroundImports[type]();
+  }
+}
+
 // Lazy-loaded components — only the selected type is fetched
 export const backgroundComponents: Record<
   Exclude<BackgroundType, 'none'>,