23+ Particle Animations for React Apps – Partycles

Description:

Partycles is a React hook that allows you to fire fancy particle bursts from any element.

It currently comes with 23 preset animations, including confetti, hearts, coins, snow, glitch, and more.

The entire library weighs 10.6 kB minzipped and has zero runtime dependencies.

You can use Partycles to mark form submissions, reward achievements, signal likes, or simply add joy to small interactions.

Key Features

• One hook useReward controls every animation
• 23 ready-made effects from subtle sparkles to full fireworks
• Customizable particle count, colors, physics, lifetime, spread
• Auto-scales for mobile by reducing particles and lifetime
• Fully typed; works with Next.js, Vite, CRA, Gatsby
• Uses requestAnimationFrame for 60 fps on modern browsers
• Built-in emoji presets for quick customization

Installation

# NPM
npm install partycles

# or
yarn add partycles

# or
pnpm add partycles

Basic Usage

1. Import the hook and a ref, pick an animation, and call the returned function. All available preset animations: ‘confetti’, ‘sparkles’, ‘hearts’, ‘stars’, ‘fireworks’, ‘bubbles’, ‘snow’, ’emoji’, ‘coins’, ‘petals’, ‘aurora’, ‘fireflies’, ‘paint’, ‘balloons’, ‘galaxy’, ‘glitch’, ‘magicdust’, ‘crystals’, ‘leaves’, ‘mortar’, ‘bokeh’, ‘ribbons’, ‘geometric’.

import { useRef } from 'react';
import { useReward } from 'partycles';
export default function SaveButton() {
  const ref = useRef<HTMLButtonElement>(null);
  const { reward, isAnimating } = useReward(ref, 'confetti', {
    particleCount: 30,
    spread: 90,
    colors: ['#ff1744', '#00e676', '#2979ff']
  });
  return (
    <button ref={ref} onClick={reward} disabled={isAnimating}>
      Save
    </button>
  );
}

2. Pause, resume, or replay programmatically:

const { reward, pause, resume } = useReward(ref, 'stars');

3. Wait for completion with the returned promise:

await reward();
navigate('/success');

4. All possible animation configs:

export interface AnimationConfig {
  particleCount?: number;
  spread?: number;
  startVelocity?: number;
  decay?: number;
  lifetime?: number;
  colors?: string[];
  elementSize?: number;
  duration?: number;
  physics?: {
    gravity?: number;
    wind?: number;
    friction?: number;
  };
  // Optional enhanced effects
  effects?: {
    flutter?: boolean; // For confetti - paper-like floating
    twinkle?: boolean; // For stars/sparkles - brightness variation
    pulse?: boolean; // For hearts - heartbeat effect
    spin3D?: boolean; // For coins - 3D rotation effect
    wobble?: boolean; // For bubbles - realistic wobble
    windDrift?: boolean; // For snow/leaves - horizontal drift
  };
}

FAQs

Q: Does Partycles work with server-side rendering?
A: Yes. The hook runs only on the client, so it does not interfere with SSR or hydration.

Q: Can I trigger multiple animations at once?
A: Each hook instance is tied to one element. Use separate refs for simultaneous bursts.

Q: How do I disable animations for users with motion sensitivity?
A: Check prefers-reduced-motion and set particleCount: 0 when the media query matches.

Q: Are the animations GPU-accelerated?
A: All effects use CSS transforms and opacity, which the browser offloads to the GPU.