Party.js Demo

Experience the magic of party-js! Click the buttons below to trigger amazing confetti and particle effects.

Interactive Demo

Basic Confetti

Simple confetti explosion from the button

Colorful Burst

More confetti with custom count and spread

Heart Shapes

Confetti with custom heart shapes

Star Shapes

Confetti with custom star shapes

Sparkles Effect

Magical sparkles around the button

Screen Effects

Full screen confetti celebration

Special Effects

Try these interactive effects that follow your cursor or create unique patterns

Loading party-js...

Code Examples

Click the copy button to copy code snippets to your clipboard

Basic Confetti

import { party } from 'party-js'

// Basic confetti
party.confetti(element)

// Custom confetti
party.confetti(element, {
  count: party.variation.range(20, 40),
  spread: party.variation.range(50, 100)
})

Shape-based Confetti

// Heart-colored confetti
party.confetti(element, {
  shapes: ['circle'],
  count: party.variation.range(10, 20),
  color: [
    party.Color.fromHex('#ff69b4'),
    party.Color.fromHex('#ff1493'),
    party.Color.fromHex('#dc143c'),
    party.Color.fromHex('#b22222')
  ]
})

// Star-colored confetti
party.confetti(element, {
  shapes: ['square'],
  count: party.variation.range(15, 25),
  color: [
    party.Color.fromHex('#ffd700'),
    party.Color.fromHex('#ffff00'),
    party.Color.fromHex('#ffa500'),
    party.Color.fromHex('#ff8c00')
  ]
})

Sparkles Effect

// Sparkles around element
party.sparkles(element, {
  count: party.variation.range(20, 40)
})

Screen Effects

// Full screen confetti (v2 API)
party.confetti(party.Rect.fromScreen(), {
  count: party.variation.range(50, 100)
})

// Rainbow explosion
party.confetti(party.Rect.fromScreen(), {
  count: party.variation.range(100, 200),
  shapes: ['circle', 'square'],
  color: [
    party.Color.fromHex('#ff0000'),
    party.Color.fromHex('#ff8000'),
    party.Color.fromHex('#ffff00'),
    party.Color.fromHex('#80ff00'),
    party.Color.fromHex('#00ff00')
  ]
})

Cursor Trail

// Interactive cursor trail (v2 API)
const handleMouseMove = (event) => {
  party.confetti(event, {
    count: party.variation.range(3, 6),
    size: party.variation.range(0.2, 0.8),
    spread: party.variation.range(10, 30)
  })
}

document.addEventListener('mousemove', handleMouseMove)
// Remember to remove the listener when done!

Installation

# Install party-js
npm install party-js

# Or with yarn
yarn add party-js

# Or with pnpm
pnpm add party-js