✨ added Particle Swarm Loader

Author: Ansub

src/app/(docs)/components/loaders/particle-swarm/page.mdx

@@ -0,0 +1,7 @@
+export const metadata = {
+    title: 'Particle Swarm Loader',
+    description: 'A Particle Swarm Loader animations that moves particles in like a swarm of bees.',
+}
+
+<BackButton href="/components/loaders" />
+<ComponentPreview path="components/loaders/ParticleSwarmLoader" usingFramer />

src/showcase/components/loaders/ParticleSwarmLoader.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+
+interface ParticleProps {
+  id: number
+  x: number
+  y: number
+  size: number
+}
+
+const ParticleSwarmLoader = () => {
+  const [particles, setParticles] = useState<ParticleProps[]>([])
+  const particleCount = 50
+
+  useEffect(() => {
+    setParticles(
+      Array.from({ length: particleCount }, (_, i) => ({
+        id: i,
+        x: Math.random() * 200 - 100,
+        y: Math.random() * 200 - 100,
+        size: Math.random() * 4 + 2,
+      })),
+    )
+  }, [])
+
+  return (
+    <div className="h-40 w-40 overflow-hidden rounded-full bg-transparent">
+      <svg width="100%" height="100%" viewBox="-100 -100 200 200">
+        {particles.map((particle) => (
+          <motion.circle
+            key={particle.id}
+            cx={particle.x}
+            cy={particle.y}
+            r={particle.size}
+            fill="#fb3a5d"
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: [0, 1, 0],
+              cx: [particle.x, 0, particle.x],
+              cy: [particle.y, 0, particle.y],
+            }}
+            transition={{
+              duration: 3,
+              repeat: Infinity,
+              ease: 'easeInOut',
+              delay: Math.random() * 2,
+            }}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}
+
+export default ParticleSwarmLoader

src/showcase/ui-group/LoaderCards.tsx

@@ -14,6 +14,7 @@ import Card from './Card'
 import WaveLoader from '../components/loaders/WaveLoader'
 import SpiralLoader from '../components/loaders/SpiralLoader'
 import RippleWaveLoader from '../components/loaders/RippleWaveLoader'
+import ParticleSwarmLoader from '../components/loaders/ParticleSwarmLoader'
 
 interface LoaderCardProps {
   title: string
@@ -90,6 +91,11 @@ const data: LoaderCardProps[] = [
     link: '/components/loaders/ripple-wave',
     component: <RippleWaveLoader />,
   },
+  {
+    title: 'Particle Swarm',
+    link: '/components/loaders/particle-swarm',
+    component: <ParticleSwarmLoader />,
+  },
 ]
 
 export default function LoaderCards() {