Import source: src/components/Hero/HeroParticles

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

src/components/Hero/HeroParticles.jsx

@@ -0,0 +1,41 @@
+import { useRef, useMemo } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+const COUNT = 250
+
+function Particles() {
+  const ref = useRef()
+  const positions = useMemo(() => {
+    const arr = new Float32Array(COUNT * 3)
+    for (let i = 0; i < COUNT; i++) {
+      arr[i * 3] = (Math.random() - 0.5) * 22
+      arr[i * 3 + 1] = (Math.random() - 0.5) * 18
+      arr[i * 3 + 2] = (Math.random() - 0.5) * 16
+    }
+    return arr
+  }, [])
+
+  useFrame(({ clock }) => {
+    if (!ref.current) return
+    ref.current.rotation.y = clock.getElapsedTime() * 0.03
+    ref.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.015) * 0.08
+  })
+
+  return (
+    <points ref={ref}>
+      <bufferGeometry>
+        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+      </bufferGeometry>
+      <pointsMaterial size={0.035} color="#c9a84c" transparent opacity={0.4} sizeAttenuation />
+    </points>
+  )
+}
+
+export default function HeroParticles() {
+  return (
+    <Canvas camera={{ position: [0, 0, 5] }} gl={{ alpha: true }} style={{ background: 'transparent' }}>
+      <Particles />
+    </Canvas>
+  )
+}