From bf3bf9cbbb528e8d2888b94d6f99ee19b6c595ac Mon Sep 17 00:00:00 2001
From: Dev-Sahad <dev.sxhd@gmail.com>
Date: Fri, 31 Jul 2026 09:52:03 +0400
Subject: [PATCH] add interactive 3d animated background

---
 src/components/AnimatedBackground.tsx    | 114 +++------
 src/components/three/BackgroundScene.tsx | 295 +++++++++++++++++++++++
 2 files changed, 335 insertions(+), 74 deletions(-)
 create mode 100644 src/components/three/BackgroundScene.tsx

diff --git a/src/components/AnimatedBackground.tsx b/src/components/AnimatedBackground.tsx
index 13a2608..e121d2a 100644
--- a/src/components/AnimatedBackground.tsx
+++ b/src/components/AnimatedBackground.tsx
@@ -1,85 +1,51 @@
 'use client'
 
-import React, { useEffect, useMemo, useRef } from 'react'
+import dynamic from 'next/dynamic'
 
-const AnimatedBackground = () => {
-  const particles = useMemo(() => Array.from({ length: 36 }, (_, i) => ({ left: (i * 47) % 100, top: (i * 71) % 100, delay: (i % 9) * 0.38, depth: 0.55 + (i % 5) * 0.12 })), [])
-  const blobRefs = useRef<(HTMLDivElement | null)[]>([])
-
-  useEffect(() => {
-    let requestId: number
-
-    const handleScroll = () => {
-      const scroll = window.pageYOffset
-
-      blobRefs.current.forEach((blob, index) => {
-        if (!blob) return
-
-        const xOffset =
-          Math.sin(scroll / 120 + index * 0.6) * 100
-
-        const yOffset =
-          Math.cos(scroll / 120 + index * 0.6) * 35
-
-        blob.style.transform = `translate(${xOffset}px, ${yOffset}px)`
-        blob.style.transition = 'transform 1.2s ease-out'
-      })
-
-      requestId = requestAnimationFrame(handleScroll)
-    }
-
-    window.addEventListener('scroll', handleScroll)
-    handleScroll()
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-      cancelAnimationFrame(requestId)
-    }
-  }, [])
+const BackgroundScene = dynamic(
+  () => import('@/components/three/BackgroundScene'),
+  { ssr: false, loading: () => null },
+)
 
+export default function AnimatedBackground() {
   return (
-    <div data-heavy-visual="true" className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
-      <div className="absolute inset-0">
-        {/* top left */}
-        <div
-          ref={(ref) => {
-            blobRefs.current[0] = ref
-          }}
-          className="absolute top-10 left-10 w-40 h-40 md:w-56 md:h-56 rounded-full bg-white blur-[90px] opacity-30"
-        />
-
-        {/* top right */}
-        <div
-          ref={(ref) => {
-            blobRefs.current[1] = ref
-          }}
-          className="absolute top-10 right-10 w-40 h-40 md:w-56 md:h-56 rounded-full bg-zinc-300 blur-[100px] opacity-25"
-        />
-
-        {/* bottom left */}
-        <div
-          ref={(ref) => {
-            blobRefs.current[2] = ref
-          }}
-          className="absolute bottom-10 left-10 w-44 h-44 md:w-60 md:h-60 rounded-full bg-zinc-400 blur-[110px] opacity-30"
-        />
+    <div
+      aria-hidden="true"
+      data-heavy-visual="true"
+      className="pointer-events-none fixed inset-0 z-0 overflow-hidden bg-[#07070a]"
+    >
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(circle at 18% 18%, rgba(34,211,238,0.09), transparent 30%), radial-gradient(circle at 82% 30%, rgba(139,92,246,0.12), transparent 34%), radial-gradient(circle at 52% 86%, rgba(217,70,239,0.07), transparent 32%)',
+        }}
+      />
 
-        {/* bottom right */}
-        <div
-          ref={(ref) => {
-            blobRefs.current[3] = ref
-          }}
-          className="absolute bottom-10 right-10 w-40 h-40 md:w-56 md:h-56 rounded-full bg-white blur-[100px] opacity-20"
-        />
+      <div className="absolute inset-0">
+        <BackgroundScene />
       </div>
 
-      <div className="absolute inset-0" style={{ perspective: '900px', transformStyle: 'preserve-3d' }}>{particles.map((particle, index) => <span key={index} className="absolute h-1 w-1 rounded-full bg-cyan-100/80 shadow-[0_0_14px_rgba(125,211,252,.9)]" style={{ left: particle.left + '%', top: particle.top + '%', animation: 'particleFloat 6s ease-in-out infinite', animationDelay: particle.delay + 's', transform: 'translateZ(' + (particle.depth * 120) + 'px)' }} />)}</div>
-      <style jsx>{'@keyframes particleFloat { 0%,100% { transform: translate3d(0,0,0) scale(.7); opacity:.15 } 50% { transform: translate3d(18px,-34px,90px) scale(1.45); opacity:.85 } }'}</style>
-
-      {/* GRID */}
-      <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff10_1px,transparent_1px),linear-gradient(to_bottom,#ffffff10_1px,transparent_1px)] bg-[size:26px_26px]" />
+      <div
+        className="absolute inset-0 opacity-40"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
+          backgroundSize: '64px 64px',
+          maskImage:
+            'linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)',
+          WebkitMaskImage:
+            'linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)',
+        }}
+      />
+
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(circle at center, transparent 25%, rgba(7,7,10,0.34) 68%, rgba(7,7,10,0.82) 100%), linear-gradient(to bottom, rgba(7,7,10,0.1), rgba(7,7,10,0.5))',
+        }}
+      />
     </div>
   )
 }
-
-export default AnimatedBackground
diff --git a/src/components/three/BackgroundScene.tsx b/src/components/three/BackgroundScene.tsx
new file mode 100644
index 0000000..f82c44a
--- /dev/null
+++ b/src/components/three/BackgroundScene.tsx
@@ -0,0 +1,295 @@
+'use client'
+
+import { useEffect, useMemo, useRef } from 'react'
+import type { MutableRefObject } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+type SceneSignals = {
+  pointer: MutableRefObject<THREE.Vector2>
+  scroll: MutableRefObject<number>
+}
+
+type ParticleLayerProps = SceneSignals & {
+  color: string
+  count: number
+  depth: number
+  seed: number
+  size: number
+  speed: number
+}
+
+function seededUnit(index: number, seed: number) {
+  const value = Math.sin((index + 1) * 12.9898 + seed * 78.233) * 43758.5453
+  return value - Math.floor(value)
+}
+
+function createParticlePositions(count: number, depth: number, seed: number) {
+  const positions = new Float32Array(count * 3)
+
+  for (let index = 0; index < count; index += 1) {
+    const offset = index * 3
+    positions[offset] = (seededUnit(index * 3, seed) - 0.5) * 22
+    positions[offset + 1] = (seededUnit(index * 3 + 1, seed) - 0.5) * 14
+    positions[offset + 2] = -seededUnit(index * 3 + 2, seed) * depth
+  }
+
+  return positions
+}
+
+function ParticleLayer({
+  color,
+  count,
+  depth,
+  pointer,
+  scroll,
+  seed,
+  size,
+  speed,
+}: ParticleLayerProps) {
+  const particles = useRef<THREE.Points>(null)
+  const positions = useMemo(
+    () => createParticlePositions(count, depth, seed),
+    [count, depth, seed],
+  )
+
+  useFrame((_, delta) => {
+    if (!particles.current) return
+
+    particles.current.rotation.y += delta * speed
+    particles.current.rotation.x = THREE.MathUtils.damp(
+      particles.current.rotation.x,
+      pointer.current.y * 0.08,
+      3,
+      delta,
+    )
+    particles.current.position.x = THREE.MathUtils.damp(
+      particles.current.position.x,
+      pointer.current.x * 0.42,
+      3,
+      delta,
+    )
+    particles.current.position.y = THREE.MathUtils.damp(
+      particles.current.position.y,
+      pointer.current.y * 0.28 + (scroll.current % 5) * 0.12,
+      3,
+      delta,
+    )
+  })
+
+  return (
+    <points ref={particles}>
+      <bufferGeometry>
+        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+      </bufferGeometry>
+      <pointsMaterial
+        blending={THREE.AdditiveBlending}
+        color={color}
+        depthWrite={false}
+        opacity={0.72}
+        size={size}
+        sizeAttenuation
+        transparent
+      />
+    </points>
+  )
+}
+
+function OrbitalSculpture({ pointer, scroll }: SceneSignals) {
+  const rig = useRef<THREE.Group>(null)
+  const core = useRef<THREE.Mesh>(null)
+  const halo = useRef<THREE.Group>(null)
+
+  useFrame(({ clock }, delta) => {
+    const elapsed = clock.getElapsedTime()
+
+    if (rig.current) {
+      rig.current.rotation.x = THREE.MathUtils.damp(
+        rig.current.rotation.x,
+        pointer.current.y * 0.22 - 0.16,
+        3.2,
+        delta,
+      )
+      rig.current.rotation.y = THREE.MathUtils.damp(
+        rig.current.rotation.y,
+        pointer.current.x * 0.3 + elapsed * 0.025,
+        3.2,
+        delta,
+      )
+      rig.current.position.y = THREE.MathUtils.damp(
+        rig.current.position.y,
+        Math.sin(elapsed * 0.35) * 0.18 - (scroll.current % 4) * 0.08,
+        2.5,
+        delta,
+      )
+    }
+
+    if (core.current) {
+      core.current.rotation.x += delta * 0.08
+      core.current.rotation.y += delta * 0.12
+    }
+
+    if (halo.current) {
+      halo.current.rotation.z -= delta * 0.035
+      halo.current.rotation.x = Math.sin(elapsed * 0.18) * 0.16
+    }
+  })
+
+  return (
+    <group ref={rig} position={[4.8, 0.2, -4.5]} scale={1.18}>
+      <mesh ref={core}>
+        <icosahedronGeometry args={[2.15, 2]} />
+        <meshBasicMaterial
+          blending={THREE.AdditiveBlending}
+          color="#67e8f9"
+          depthWrite={false}
+          opacity={0.1}
+          transparent
+          wireframe
+        />
+      </mesh>
+
+      <mesh scale={0.72} rotation={[0.45, 0.2, 0.25]}>
+        <octahedronGeometry args={[2.15, 1]} />
+        <meshBasicMaterial
+          blending={THREE.AdditiveBlending}
+          color="#c4b5fd"
+          depthWrite={false}
+          opacity={0.08}
+          transparent
+          wireframe
+        />
+      </mesh>
+
+      <group ref={halo} rotation={[0.9, 0.18, 0.3]}>
+        <mesh>
+          <torusGeometry args={[2.85, 0.012, 8, 140]} />
+          <meshBasicMaterial
+            blending={THREE.AdditiveBlending}
+            color="#a78bfa"
+            depthWrite={false}
+            opacity={0.34}
+            transparent
+          />
+        </mesh>
+        <mesh rotation={[1.05, 0.3, 0.55]}>
+          <torusGeometry args={[3.35, 0.009, 8, 140]} />
+          <meshBasicMaterial
+            blending={THREE.AdditiveBlending}
+            color="#22d3ee"
+            depthWrite={false}
+            opacity={0.2}
+            transparent
+          />
+        </mesh>
+      </group>
+    </group>
+  )
+}
+
+function FloatingGeometry({ pointer }: Pick<SceneSignals, 'pointer'>) {
+  const object = useRef<THREE.Mesh>(null)
+
+  useFrame(({ clock }, delta) => {
+    if (!object.current) return
+
+    const elapsed = clock.getElapsedTime()
+    object.current.rotation.x += delta * 0.045
+    object.current.rotation.y -= delta * 0.07
+    object.current.position.x = THREE.MathUtils.damp(
+      object.current.position.x,
+      -4.7 + pointer.current.x * 0.24,
+      2.8,
+      delta,
+    )
+    object.current.position.y = -2.5 + Math.sin(elapsed * 0.42) * 0.22
+  })
+
+  return (
+    <mesh ref={object} position={[-4.7, -2.5, -5.8]} rotation={[0.3, 0.2, 0]}>
+      <torusKnotGeometry args={[1.3, 0.23, 96, 10, 2, 3]} />
+      <meshBasicMaterial
+        blending={THREE.AdditiveBlending}
+        color="#d946ef"
+        depthWrite={false}
+        opacity={0.07}
+        transparent
+        wireframe
+      />
+    </mesh>
+  )
+}
+
+function Scene({ pointer, scroll }: SceneSignals) {
+  return (
+    <>
+      <fog attach="fog" args={['#07070a', 8, 24]} />
+      <ParticleLayer
+        color="#67e8f9"
+        count={92}
+        depth={18}
+        pointer={pointer}
+        scroll={scroll}
+        seed={3}
+        size={0.045}
+        speed={0.008}
+      />
+      <ParticleLayer
+        color="#c4b5fd"
+        count={56}
+        depth={14}
+        pointer={pointer}
+        scroll={scroll}
+        seed={11}
+        size={0.032}
+        speed={-0.012}
+      />
+      <OrbitalSculpture pointer={pointer} scroll={scroll} />
+      <FloatingGeometry pointer={pointer} />
+    </>
+  )
+}
+
+export default function BackgroundScene() {
+  const pointer = useRef(new THREE.Vector2())
+  const scroll = useRef(0)
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      pointer.current.set(
+        (event.clientX / window.innerWidth) * 2 - 1,
+        -(event.clientY / window.innerHeight) * 2 + 1,
+      )
+    }
+    const handlePointerLeave = () => pointer.current.set(0, 0)
+    const handleScroll = () => {
+      scroll.current = window.scrollY / Math.max(window.innerHeight, 1)
+    }
+
+    window.addEventListener('pointermove', handlePointerMove, { passive: true })
+    window.addEventListener('pointerleave', handlePointerLeave)
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerleave', handlePointerLeave)
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (
+    <Canvas
+      camera={{ fov: 52, position: [0, 0, 9] }}
+      dpr={[1, 1.4]}
+      gl={{
+        alpha: true,
+        antialias: false,
+        powerPreference: 'high-performance',
+        toneMapping: THREE.ACESFilmicToneMapping,
+      }}
+    >
+      <Scene pointer={pointer} scroll={scroll} />
+    </Canvas>
+  )
+}