Particle Card

PreviewCode

Copy Prompt

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

View Profile

Sam Jenkins

Product Designer

Installation

CLIManual

Run the following command to install the component:

npmpnpmyarnbun

Copy

npx rareui add particle-card

This will install the component to components/rareui/ directory.

Installation

npx rareui add particle-card

This will automatically install the component to your components/rareui/cards/ directory with all dependencies.

Required Utilities

This component uses a cn utility function for className merging. If you don't have it, create lib/utils.ts:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

Basic Usage

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

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

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 Grid

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

Team Grid Example

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>
  );
}

Props

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

Dependencies

• motion-react (Framer Motion) - For animations
• clsx & tailwind-merge - For className utilities
• React 18+ - For hooks (useState, useRef, useEffect, useMemo)

These will be automatically installed if you use the RareUI CLI.

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/cards/ParticleCard'));

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],
}}