neoconfetti

Reactivity

Changing options affects the animation in different ways:

• Changing particleCount: Destroys existing confetti mid-flight and creates a new explosion with the new options.
• Changing colors or particleShape: If particleCount remains unchanged, particles will change their colors or shapes mid-flight without restarting the explosion.

Performance

• DOM Nodes: The library creates 2 DOM nodes for every single confetti. For example, a particleCount of 150 creates 300 nodes. High counts (e.g., 400 or 500) may impact performance on some devices.
• Memory Management: By default, destroyAfterDone is true, meaning nodes are removed after the duration to free memory. Set it to false if you need to keep them.

DOM Node Count

This library creates 2 DOM nodes for every single confetti particle. For the default particleCount of 150, this results in 300 DOM nodes. While manageable for most devices, be cautious when using high counts (e.g., 400 or 500) on lower-end hardware.

Memory Management

By default, destroyAfterDone is set to true, meaning all confetti DOM nodes are removed after the duration expires to prevent memory leaks. If you need the particles to persist, set destroyAfterDone: false.

DOM Node Count

This library creates 2 DOM nodes for every single confetti particle. For the default particleCount of 150, this results in 300 DOM nodes. If you increase particleCount to high values (e.g., 400 or 500), monitor the performance on target devices.

Memory Cleanup

To prevent memory leaks, the library destroys all confetti DOM nodes after the duration has passed. If you need to keep the nodes in the DOM, set destroyAfterDone: false in your options object.

DOM Node Count

This library creates 2 DOM nodes for every single confetti particle. For example, a particleCount of 150 results in 300 DOM nodes. While modern devices handle this well, be cautious when using high counts (e.g., 400 or 500) on lower-end target devices.

Memory Management

By default, destroyAfterDone is set to true, meaning all confetti DOM nodes are removed after the duration expires to free up memory. If you need the particles to remain on screen, set destroyAfterDone={false}.

To set up the Solid demo project, install the dependencies using your preferred package manager. While the template includes a pnpm-lock.yaml file (maintained via pnpm up -Lri), you can use npm, pnpm, or yarn to install.

$ npm install # or pnpm install or yarn install

You can install the Vue integration for neoconfetti using your preferred package manager.

# pnpm
pnpm add @neoconfetti/vue

# npm
npm install @neoconfetti/vue

# yarn
yarn add @neoconfetti/vue

Install the SolidJS confetti package using your preferred package manager.

# pnpm
pnpm add @neoconfetti/solid

# npm
npm install @neoconfetti/solid

# yarn
yarn add @neoconfetti/solid

To trigger a confetti explosion, use the confetti action on a Svelte element via the use:confetti directive. This works seamlessly in SSR environments like SvelteKit.

Basic Usage

<script>
	import { confetti } from '@neoconfetti/svelte';
</script>

<div use:confetti />

Customizing Behavior

Pass an options object to the action to customize the explosion:

<div use:confetti={{ particleCount: 200, force: 0.3 }} />

To use the library, instantiate the Confetti class by passing a DOM element as the first argument. You can optionally pass a configuration object as the second argument. Call .explode() to trigger the animation. The .explode() method returns a Promise that resolves when the animation is complete.

import { Confetti } from '@neoconfetti/vanilla';

// Basic usage
const confetti = new Confetti(document.querySelector('#confetti'));
await confetti.explode();

// With options
const confetti = new Confetti(document.querySelector('#confetti'), {
	color: ['#ff0000', '#00ff00', '#0000ff'],
	force: 0.9,
});
confetti.explode();

The simplest way to trigger a confetti explosion is by using the v-confetti directive on an element. Import vConfetti from @neoconfetti/vue and apply it to a template element.

Basic Usage

<script>
import { vConfetti } from '@neoconfetti/vue';
</script>

<div v-confetti />

Customizing with Options

You can pass an options object directly to the directive to customize the explosion behavior:

<div v-confetti="{ particleCount: 200, force: 0.3 }" />