Floating Cluster

import { Float } from '@react-three/drei';

const SHAPES: { pos: [number, number, number]; tint: string }[] = [
  { pos: [-1.4, 0.6, 0], tint: '#22e0ff' },
  { pos: [1.3, -0.4, -0.5], tint: '#ff2fd0' },
  { pos: [0.2, 1.2, 0.3], tint: '#8a5cff' },
  { pos: [-0.6, -1.1, 0.2], tint: '#ff8a3d' },
  { pos: [1.0, 0.9, -0.3], tint: '#ff5db1' },
];

export default function FloatingCluster({ color, scale = 1 }: { color?: string; scale?: number }) {
  return (
    <group scale={scale}>
      {SHAPES.map((s, i) => {
        const c = color ?? s.tint;
        return (
          <Float key={i} speed={2} rotationIntensity={1} floatIntensity={1.5}>
            <mesh position={s.pos}>
              {i % 2 === 0 ? <boxGeometry args={[0.55, 0.55, 0.55]} /> : <octahedronGeometry args={[0.45]} />}
              <meshPhysicalMaterial
                color={c}
                metalness={0.6}
                roughness={0.15}
                iridescence={1}
                iridescenceIOR={1.4}
                iridescenceThicknessRange={[120, 520]}
                clearcoat={1}
                emissive={c}
                emissiveIntensity={0.6}
              />
            </mesh>
          </Float>
        );
      })}
    </group>
  );
}