Particle Card
An interactive card with particle explosion effect on hover, perfect for team member profiles.
Sam Jenkins
Product Designer
Passionate about creating intuitive and beautiful user experiences. I specialize in UI/UX design and frontend development with a focus on accessibility. I am a frontend developer with a passion for creating engaging and interactive user interfaces.
UI/UXReactMotionFigma
Sam Jenkins
Product Designer
Installation
pnpm dlx rareui add particle-card
Usage
1
Import the component
import ParticleCard from '@/components/rareui/ParticleCard';
2
Use in your application
export default function App() {
return (
<ParticleCard />
);
}
Features
Image breaks into animated particles on hover.
Examples
Examples
1
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']}
/>
2
Adjusting Particle Density
<ParticleCard
cols={30} // More columns = smaller particles
rows={36} // More rows = denser effect
/>
3
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>
);
}
Customization
Change Background Gradient
Modify the back content gradient in the component:
className="bg-linear-to-br from-purple-600 to-blue-600"
// Change to:
className="bg-linear-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) |