Confetti

A Vue component for confetti animations.

Note: This component uses canvas-confetti npm package as a dependency.

Install package using following commands.

npm

pnpm

bun

yarn

npm install canvas-confetti
npm install -D @types/canvas-confetti

API

Confetti

Prop Name	Type	Default	Description
`options`	`ConfettiOptions`	`{}`	Options for individual confetti bursts.
`globalOptions`	`ConfettiGlobalOptions`	`{}`	Global options for the confetti instance (e.g., resize behavior).
`manualstart`	`boolean`	`false`	If `true`, confetti won't start automatically on mount.

`ConfettiOptions` Properties

Property	Type	Default	Description
`particleCount`	`number`	`50`	The number of confetti particles to launch.
`angle`	`number`	`90`	The angle in degrees at which to launch the confetti.
`spread`	`number`	`45`	The spread in degrees of the confetti.
`startVelocity`	`number`	`45`	The initial velocity of the confetti particles.
`decay`	`number`	`0.9`	The rate at which confetti particles slow down.
`gravity`	`number`	`1`	The gravity applied to confetti particles.
`drift`	`number`	`0`	The horizontal drift applied to confetti particles.
`ticks`	`number`	`200`	The number of animation frames the confetti should last.
`origin`	`{ x: number, y: number }`	`{ x: 0.5, y: 0.5 }`	The origin point (from 0 to 1) of the confetti emission.
`colors`	`string[]`	`['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']`	Array of color strings in HEX format for the confetti particles.
`shapes`	`string[]`	`['square', 'circle']`	Array of shapes for the confetti particles.
`scalar`	`number`	`1`	Scaling factor for confetti particle sizes.
`zIndex`	`number`	`100`	The z-index value for the confetti canvas element.
`disableForReducedMotion`	`boolean`	`false`	Disables confetti for users who prefer reduced motion.
`useWorker`	`boolean`	`true`	Use a Web Worker for better performance.
`resize`	`boolean`	`true`	Whether to automatically resize the canvas when the window resizes.
`canvas`	`HTMLCanvasElement \| null`	`null`	Custom canvas element to draw confetti on.
`gravity`	`number`	`1`	The gravity applied to confetti particles.
`drift`	`number`	`0`	The horizontal drift applied to particles.
`flat`	`boolean`	`false`	If `true`, confetti particles will be flat (no rotation or 3D effect).

Confetti Button

Prop Name	Type	Default	Description
`options`	`ConfettiOptions & { canvas?: HTMLCanvasElement }`	`{}`	Options for confetti when the button is clicked.

Component Code

You can copy and paste the following code to create these components:

Confetti.vue

ConfettiButton.vue

Features

Confetti Animation: Easily add confetti animations to your Vue application.
Customizable Options: Configure both global and individual options for confetti behavior.
Manual Control: Choose whether to start confetti automatically or manually trigger it.
Button Integration: Use the ConfettiButton component to trigger confetti on button clicks.