Particle Card

Usage

import ParticleCard from '@/components/rareui/ParticleCard';

export default function App() {
  return (
    <ParticleCard />
  );
}

Examples

With Custom Content

<ParticleCard
  name="Jane Doe"
  role="Senior Developer"
  bio="Full-stack engineer with 8+ years building scalable applications."
  img="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
  tags={['React', 'Node.js', 'TypeScript']}
/>

Adjusting Particle Density

<ParticleCard
  cols={30}  // More columns = smaller particles
  rows={36}  // More rows = denser effect
/>

Team Grid

const teamMembers = [
  { name: 'Alice Chen', role: 'CEO', tags: ['Leadership', 'Strategy'] },
  { name: 'Bob Smith', role: 'CTO', tags: ['Engineering', 'Architecture'] },
  { name: 'Carol Wang', role: 'Designer', tags: ['UI/UX', 'Branding'] },
];

export default function Team() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
      {teamMembers.map((member) => (
        <ParticleCard key={member.name} {...member} />
      ))}
    </div>
  );
}

Features

• Particle Explosion Effect: Image breaks into animated particles on hover
• Smooth Transitions: Framer Motion powered animations
• Dual-Sided Content: Front shows preview, back shows detailed info
• Fully Customizable: Control particle density, content, and styling
• Responsive Design: Adapts to different screen sizes
• Performance Optimized: Uses useMemo for particle calculations

Customization

Change Background Gradient

Modify the back content gradient in the component:

className="bg-gradient-to-br from-purple-600 to-blue-600"
// Change to:
className="bg-gradient-to-br from-emerald-600 to-cyan-600"

Adjust Animation Timing

Modify the motion transition values:

transition={{
  duration: 1.2,  // Slower explosion
  delay: p.delay,
  ease: [0.25, 0.46, 0.45, 0.94],
}}

Performance Tips

For better performance with many cards:

// Reduce particle density
<ParticleCard cols={15} rows={18} />

// Or lazy load cards
import dynamic from 'next/dynamic';
const ParticleCard = dynamic(() => import('@/components/rareui/ParticleCard'));

Props

Prop	Type	Default	Description
name	string	"Sam Jenkins"	Name displayed on the card front
role	string	"Product Designer"	Role or title displayed
bio	string	Default bio...	Biography shown on card back
img	string	Unsplash URL	Background image URL
tags	string[]	['UI/UX', ...]	Array of skill/tag labels
cols	number	20	Particle grid columns (affects particle size)
rows	number	24	Particle grid rows (affects particle density)