Import source: src/components/ArtistSpotlight/ArtistParticles

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.

src/components/ArtistSpotlight/ArtistParticles.jsx

@@ -0,0 +1,51 @@
+import { useRef, useMemo } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+const COUNT = 280
+
+function Particles() {
+  const meshRef = useRef()
+  const dummy = useMemo(() => new THREE.Object3D(), [])
+
+  const data = useMemo(() => {
+    return Array.from({ length: COUNT }, (_, i) => ({
+      phi: Math.acos(-1 + (2 * i) / COUNT),
+      theta: Math.sqrt(COUNT * Math.PI) * (2 * i / COUNT) * Math.PI,
+      speed: 0.15 + Math.random() * 0.25,
+      radius: 2.2 + Math.random() * 1.4,
+    }))
+  }, [])
+
+  useFrame(({ clock }) => {
+    if (!meshRef.current) return
+    const t = clock.getElapsedTime()
+    data.forEach((p, i) => {
+      const r = p.radius + Math.sin(t * p.speed + i * 0.3) * 0.25
+      dummy.position.set(
+        r * Math.sin(p.phi) * Math.cos(p.theta + t * p.speed * 0.08),
+        r * Math.cos(p.phi),
+        r * Math.sin(p.phi) * Math.sin(p.theta + t * p.speed * 0.08),
+      )
+      dummy.scale.setScalar(0.012 + Math.abs(Math.sin(t * 0.5 + i)) * 0.008)
+      dummy.updateMatrix()
+      meshRef.current.setMatrixAt(i, dummy.matrix)
+    })
+    meshRef.current.instanceMatrix.needsUpdate = true
+  })
+
+  return (
+    <instancedMesh ref={meshRef} args={[null, null, COUNT]}>
+      <sphereGeometry args={[1, 4, 4]} />
+      <meshBasicMaterial color="#c9a84c" transparent opacity={0.55} />
+    </instancedMesh>
+  )
+}
+
+export default function ArtistParticles() {
+  return (
+    <Canvas camera={{ position: [0, 0, 7], fov: 50 }} gl={{ alpha: true }} style={{ background: 'transparent' }}>
+      <Particles />
+    </Canvas>
+  )
+}