"use client"; import React, { useRef, useMemo } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import * as THREE from "three"; function Cloud({ count = 2000 }) { const ref = useRef(null); const { positions, colors } = useMemo(() => { const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); const c1 = new THREE.Color("#6366f1"); const c2 = new THREE.Color("#8b5cf6"); const c3 = new THREE.Color("#06b6d4"); for (let i = 0; i < count; i++) { const r = Math.random() * 2.5; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(Math.random() * 2 - 1); positions[i * 3] = r * Math.sin(phi) * Math.cos(theta); positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta); positions[i * 3 + 2] = r * Math.cos(phi); const t = Math.random(); const color = t < 0.33 ? c1 : t < 0.66 ? c2 : c3; colors[i * 3] = color.r; colors[i * 3 + 1] = color.g; colors[i * 3 + 2] = color.b; } return { positions, colors }; }, [count]); useFrame(({ clock }) => { if (!ref.current) return; ref.current.rotation.y = clock.getElapsedTime() * 0.12; ref.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.15) * 0.15; }); return ( ); } interface ParticleCloudProps { className?: string; style?: React.CSSProperties; } export default function ParticleCloud({ className, style }: ParticleCloudProps) { return (

); }

Particle Cloud