feat(portfolio): global mouse-interactive 3D background (#179)

* feat(portfolio): global cursor-reactive constellation background

Add InteractiveConstellation: a fixed full-viewport 2D canvas of
drifting particles linked by proximity lines, with mouse repulsion.
Mounted at the app root so it spans every section, not just the hero.

- Pulls cyan/purple from theme tokens, respects prefers-reduced-motion
- DPR-clamped, area-scaled particle count with desktop/mobile caps
- Pauses RAF on tab hide to save battery

* feat(portfolio): bolder constellation + cursor-connection lines

The effect was too subtle to register against the hero's 3D scene.
Increase particle density, size, and link opacity so it reads on
every section, and draw lines from the cursor to nearby particles
for a clearer interactive feel (not just repulsion).

* feat(portfolio): reduced-motion static frame + touch support

Make the constellation show for everyone:
- prefers-reduced-motion now paints a single static frame (and
  redraws on resize) instead of rendering nothing
- touchmove/touchend tracked alongside mouse so the cursor lines
  work on phones/tablets; registered passive so scroll stays smooth

Render logic unified into one draw(animate) function shared by
both the static and animated paths.

* feat(portfolio): global mouse-interactive 3D background

Promote the hero's 3D scene to a single global SceneBackground
mounted at the app root, so the wireframe geometry + particle field
spans every section. The whole scene tilts toward the pointer and
the camera parallaxes, steered by a window-level mouse/touch
listener (the canvas stays pointer-events:none).

- Replaces the 2D InteractiveConstellation as the primary background;
  constellation stays as the no-WebGL / error fallback
- Reduced motion renders a frozen 3D frame (frameloop=demand)
- PerformanceMonitor + mobile particle caps keep weak devices smooth
- Hero loses its now-duplicate local scene + tsparticles fallback;
  delete orphaned HeroScene, trim unused particlesOptions

* fix(portfolio): restore continuous ambient motion to 3D background

The InteractiveRig lerped the scene toward the pointer and stopped,
so an idle mouse froze the group (only per-mesh spin remained).
Drive the group's rotation from the clock instead -- a continuous
orbit always runs, with the smoothed pointer offset layered on top
for steering.

Author: Sagargupta16

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, lazy, Suspense } from "react";
+import { useEffect, useState, lazy, Suspense } from "react";
 import { ReactLenis } from "lenis/react";
 import Nav from "@components/layout/Navigation/Nav";
 import Hero from "@components/layout/Header/Hero";
@@ -13,9 +13,15 @@ import SectionTransition from "@components/ui/SectionTransition";
 import ParallaxElements from "@components/ui/ParallaxElements";
 import AuroraBlobs from "@components/ui/AuroraBlobs";
 import ShootingStars from "@components/ui/ShootingStars";
+import InteractiveConstellation from "@components/ui/InteractiveConstellation";
 import SystemStatus from "@components/ui/SystemStatus";
+import { hasWebGL } from "@components/layout/Header/heroConstants";
 import { BreakpointProvider } from "@hooks/BreakpointProvider";
 
+// Global interactive 3D background, lazy-loaded so Three.js stays out of the
+// initial bundle. Falls back to the 2D constellation when WebGL is unavailable.
+const SceneBackground = lazy(() => import("@components/3d/SceneBackground"));
+
 // Lazy Load "Below the fold" sections for massive performance gains
 const About = lazy(() => import("@pages/about/About"));
 const Experience = lazy(() => import("@pages/experience/Experience"));
@@ -28,6 +34,8 @@ const Contact = lazy(() => import("@pages/contact/Contact"));
 const GitHub = lazy(() => import("@pages/github/GitHub"));
 
 const App = () => {
+   const [webGLSupported] = useState(() => hasWebGL());
+
    useEffect(() => {
       globalThis.history.scrollRestoration = "manual";
       globalThis.scrollTo(0, 0);
@@ -48,6 +56,15 @@ const App = () => {
             <KeyboardNav />
             <AuroraBlobs />
             <ShootingStars />
+            {webGLSupported ? (
+               <ErrorBoundary fallback={<InteractiveConstellation />}>
+                  <Suspense fallback={null}>
+                     <SceneBackground />
+                  </Suspense>
+               </ErrorBoundary>
+            ) : (
+               <InteractiveConstellation />
+            )}
             <ParallaxElements />
             <div className="relative min-h-screen">
                <Nav />

src/components/3d/HeroScene.tsx

@@ -0,0 +1,197 @@
+/* eslint-disable react/no-unknown-property */
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { PerformanceMonitor } from "@react-three/drei";
+import * as THREE from "three";
+import FloatingGeometry from "./FloatingGeometry";
+import ParticleField from "./ParticleField";
+import useBreakpoint from "@hooks/useBreakpoint";
+import useReducedMotion from "@hooks/useReducedMotion";
+
+// Global interactive 3D background. A single fixed full-viewport canvas that
+// spans every section. The whole scene tilts toward the pointer and the camera
+// parallaxes, so moving the mouse (or dragging a finger) steers the view.
+//
+// Pointer is tracked on `window` -- NOT via R3F's built-in state.pointer --
+// because the canvas is pointer-events:none (it must not intercept clicks on
+// the content above it), which would otherwise freeze R3F's pointer at origin.
+
+interface Pointer {
+   x: number; // normalized -1..1
+   y: number; // normalized -1..1
+}
+
+// Lerps the scene group + camera toward the pointer for a parallax steer.
+const InteractiveRig = ({
+   pointer,
+   children,
+}: {
+   pointer: RefObject<Pointer>;
+   children: React.ReactNode;
+}) => {
+   const group = useRef<THREE.Group>(null);
+   // Smoothed pointer offset, lerped each frame so steering eases in/out.
+   const steer = useRef({ x: 0, y: 0 });
+
+   // Read camera via the frame state (not a captured useThree value) so the
+   // React Compiler immutability rule allows the per-frame mutation.
+   useFrame((state, delta) => {
+      const p = pointer.current;
+      const k = Math.min(1, delta * 2); // frame-rate-independent lerp factor
+      const t = state.clock.elapsedTime;
+
+      // Ease the pointer offset toward the live pointer.
+      steer.current.x += (p.x - steer.current.x) * k;
+      steer.current.y += (p.y - steer.current.y) * k;
+
+      if (group.current) {
+         // Continuous ambient orbit (always running) + pointer steer on top.
+         group.current.rotation.y = t * 0.12 + steer.current.x * 0.4;
+         group.current.rotation.x =
+            Math.sin(t * 0.15) * 0.12 - steer.current.y * 0.28;
+      }
+
+      // Subtle camera parallax -- the scene appears to shift behind the glass.
+      const { camera } = state;
+      camera.position.x += (steer.current.x * 1.2 - camera.position.x) * k;
+      camera.position.y += (-steer.current.y * 0.8 - camera.position.y) * k;
+      camera.lookAt(0, 0, 0);
+   });
+
+   return <group ref={group}>{children}</group>;
+};
+
+const SceneBackground = () => {
+   const { isMobile } = useBreakpoint();
+   const reducedMotion = useReducedMotion();
+   const [degraded, setDegraded] = useState(false);
+   const pointer = useRef<Pointer>({ x: 0, y: 0 });
+
+   useEffect(() => {
+      const setFromXY = (clientX: number, clientY: number) => {
+         pointer.current.x = (clientX / globalThis.innerWidth) * 2 - 1;
+         pointer.current.y = (clientY / globalThis.innerHeight) * 2 - 1;
+      };
+      const onMouseMove = (e: MouseEvent) => setFromXY(e.clientX, e.clientY);
+      const onTouchMove = (e: TouchEvent) => {
+         const t = e.touches[0];
+         if (t) setFromXY(t.clientX, t.clientY);
+      };
+
+      globalThis.addEventListener("mousemove", onMouseMove);
+      globalThis.addEventListener("touchmove", onTouchMove, { passive: true });
+      return () => {
+         globalThis.removeEventListener("mousemove", onMouseMove);
+         globalThis.removeEventListener("touchmove", onTouchMove);
+      };
+   }, []);
+
+   const desktopParticles = degraded ? 150 : 300;
+   const particleCount = isMobile ? 100 : desktopParticles;
+   const dpr: [number, number] = isMobile ? [0.5, 1] : [1, 2];
+
+   return (
+      <Canvas
+         aria-hidden="true"
+         style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 0,
+            pointerEvents: "none",
+         }}
+         camera={{ position: [0, 0, 8], fov: 50 }}
+         dpr={dpr}
+         // Reduced motion -> render once and freeze (static 3D snapshot).
+         frameloop={reducedMotion ? "demand" : "always"}
+         gl={{
+            antialias: !isMobile,
+            alpha: true,
+            powerPreference: "high-performance",
+         }}
+      >
+         <PerformanceMonitor
+            onDecline={() => setDegraded(true)}
+            onIncline={() => setDegraded(false)}
+         />
+
+         {/* Lighting matching glassmorphism theme */}
+         <ambientLight intensity={0.2} />
+         <directionalLight position={[5, 5, 5]} intensity={0.5} color="#06b6d4" />
+         <pointLight position={[-5, -3, 3]} intensity={0.3} color="#a855f7" />
+
+         <InteractiveRig pointer={pointer}>
+            {/* Center: wireframe torus knot */}
+            <FloatingGeometry
+               geometry="torusKnot"
+               position={[0, 0, 0]}
+               scale={isMobile ? 1.2 : 1.8}
+               color="#06b6d4"
+               wireframe
+               rotationSpeed={0.15}
+               floatIntensity={0.5}
+               opacity={0.3}
+            />
+
+            {/* Left: glass-like icosahedron */}
+            {!isMobile && (
+               <FloatingGeometry
+                  geometry="icosahedron"
+                  position={[-4, 1.5, -2]}
+                  scale={0.8}
+                  color="#a855f7"
+                  wireframe={false}
+                  rotationSpeed={0.25}
+                  floatIntensity={1.2}
+                  distortion={0.3}
+                  opacity={0.2}
+               />
+            )}
+
+            {/* Right: wireframe octahedron */}
+            {!isMobile && (
+               <FloatingGeometry
+                  geometry="octahedron"
+                  position={[3.5, -1, -1]}
+                  scale={0.7}
+                  color="#06b6d4"
+                  wireframe
+                  rotationSpeed={0.35}
+                  floatIntensity={0.8}
+                  opacity={0.25}
+               />
+            )}
+
+            {/* Scattered small decorative dodecahedrons - desktop, non-degraded */}
+            {!isMobile && !degraded && (
+               <>
+                  <FloatingGeometry
+                     geometry="dodecahedron"
+                     position={[-2.5, -2, -3]}
+                     scale={0.3}
+                     color="#06b6d4"
+                     wireframe
+                     rotationSpeed={0.5}
+                     floatIntensity={1.5}
+                     opacity={0.15}
+                  />
+                  <FloatingGeometry
+                     geometry="dodecahedron"
+                     position={[2, 2.5, -4]}
+                     scale={0.25}
+                     color="#a855f7"
+                     wireframe
+                     rotationSpeed={0.4}
+                     floatIntensity={1.8}
+                     opacity={0.12}
+                  />
+               </>
+            )}
+
+            {/* 3D particle field */}
+            <ParticleField count={particleCount} />
+         </InteractiveRig>
+      </Canvas>
+   );
+};
+
+export default SceneBackground;