Particle Background

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { useRef, useMemo } from "react";
4import { Canvas, useFrame } from "@react-three/fiber";
5import * as THREE from "three";
6
7const Particles = ({ count = 2000 }) => {
8  const mesh = useRef();
9  const light = useRef();
10
11  // Generate random positions
12  const particlesPosition = useMemo(() => {
13    const positions = new Float32Array(count * 3);
14    for (let i = 0; i < count; i++) {
15      positions[i * 3] = (Math.random() - 0.5) * 10;
16      positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
17      positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
18    }
19    return positions;
20  }, [count]);
21
22  useFrame((state) => {
23    const time = state.clock.getElapsedTime();
24    if (mesh.current) {
25      mesh.current.rotation.y = time * 0.05;
26      mesh.current.rotation.x = time * 0.02;
27    }
28  });
29
30  return (
31    <points ref={mesh}>
32      <bufferGeometry>
33        <bufferAttribute
34          attach="attributes-position"
35          count={particlesPosition.length / 3}
36          array={particlesPosition}
37          itemSize={3}
38        />
39      </bufferGeometry>
40      <pointsMaterial
41        size={0.02}
42        color="#00f0ff"
43        transparent
44        opacity={0.6}
45        sizeAttenuation
46        blending={THREE.AdditiveBlending}
47      />
48    </points>
49  );
50};
51
52export default function ParticleBackground({ children }) {
53  return (
54    <div className="relative w-full h-[500px] overflow-hidden rounded-2xl bg-[#050505]">
55      <div className="absolute inset-0 pointer-events-none">
56        <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
57          <Particles />
58        </Canvas>
59      </div>
60
61      <div className="relative z-10 w-full h-full flex flex-col items-center justify-center pointer-events-none p-8 text-center">
62        {children || (
63          <div className="glass px-8 py-6 rounded-2xl pointer-events-auto">
64            <h2 className="text-3xl font-extrabold text-white mb-2">Particle Engine™</h2>
65            <p className="text-gray-400">High-performance WebGL particles.</p>
66          </div>
67        )}
68      </div>
69    </div>
70  );
71}
72