Confetti

Display falling or flying particles

npm run add Confetti

Use the Confetti component to display falling or flying particles, shapes or emojis. They can be used to create fun, celebratory animations that enhance user satisfaction and make success moments feel special, with full control over style and physics for tailored experiences.

<Confetti />

The Confetti component can be used as-is, without any props. The canvas will take up 100% of its container. To improve page performance, it’ll only play when the element is in viewport. You can use props to change colors, shapes and physics.

Presets

The component comes with 33 presets (including holiday-specific particle effects such as Christmas, New Year or Easter) that you can pass to the component to quickly achieve certain effects. For example, weather conditions or flying particles:

---
import { confettiPresets } from '@components/Confetti/presets'
---

<Confetti {...confettiPresets.blizzard} />

---
import { confettiPresets } from '@components/Confetti/presets'
---

<Confetti {...confettiPresets.flyingConfetti} />

---
import { confettiPresets } from '@components/Confetti/presets'
---

<Confetti {...confettiPresets.rain} />

Colors and Opacity

The colors and opacity of the particles can be configured using the colors and opacity props. The colors prop expects an array of colors. If you need all particles to have the same color, simply pass a single color to the array.

The opacity prop expect a number between 0.1 and 1. If the opacity prop is not provided, each particle will receive a random opacity based on its size, otherwise all particles will have the same opacity.

<Confetti colors={[
    '#f8db00',
    '#ff9f43',
    '#de3233'
]} />

Shapes

The shapes of the particles can also be customized using the shapes prop that expects an array of strings. It can have the following values: circle, square, triangle and star. For example, if you want to display circles only, you can use the following:

<Confetti shapes={['circle']} />

If the shapes prop is omitted, the component will use all available shapes.

Emojis

In case you want to use custom shapes, you can use the emoji prop to pass text or emojis. If the prop is set, it’ll take priority over the shapes prop:

<Confetti emojis={['✨', '⭐']} />

Physics

The physics of the particles can be configured through the following props:

• gravity: The vertical acceleration applied to particles. Use a negative value for flying particles. Defaults to 0.05.
• airResistance: Multiplier reducing velocity to simulate air drag. Defaults to 0.99.
• terminalVelocity: The maximum downward speed allowed for particles. Defaults to 8.
• wind: Constant horizontal wind force applied to all particles.
• turbulence: Random jitter added to movement to simulate chaotic air currents.
• speed: Global speed multiplier affecting all movement. Defaults to 1.
• size: Base particle size. The final size is slightly randomized based off the base value. Defaults to 1.
• wanderFrequency: Controls how often horizontal wandering oscillation occurs. Defaults to 5000.
• wanderAmplitude: Strength of horizontal wandering movement. Defaults to 0.3.

For example, to simulate slow falling snow, you can modify physics props as per the following:

<Confetti
    amount={150}
    gravity={0.008}
    terminalVelocity={1.5}
    turbulence={0}
    shapes={['circle']}
    colors={['#FFFFFF', '#F0F8FF', '#E6F3FF']}
    size={0.1}
    speed={0.8}
/>

API

type ConfettiProps = {
    amount?: number
    colors?: string[]
    shapes?: ('circle' | 'square' | 'triangle' | 'star')[]
    emojis?: string[]
    gravity?: number
    airResistance?: number
    terminalVelocity?: number
    wind?: number
    turbulence?: number
    speed?: number
    size?: number
    opacity?: number
    wanderFrequency?: number
    wanderAmplitude?: number
    className?: string
}