Physics-Based Confetti Cannon

Pro

Hand-rolled canvas particles with gravity, drag, terminal velocity, and paper ribbons that flutter on the way down.

show offconfetticannonframer motiontabler icons react

Physics-Based Confetti Cannon component preview

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add confetti-cannon

Usage

Import ConfettiCannon from @/components/wensity/confetti-cannon and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import {
 2  ConfettiCannon,
 3  type ConfettiCannonHandle,
 4} from "@/components/wensity/confetti-cannon";
 5import { useRef } from "react";
 6
 7export default function Example() {
 8  const cannonRef = useRef<ConfettiCannonHandle | null>(null);
 9  return (
10    <div>
11      <ConfettiCannon
12        apiRef={cannonRef}
13        origin="bottom"
14        loopMs={0}
15        autoFire={false}
16      />
17      <button onClick={() => cannonRef.current?.fire()}>Celebrate</button>
18    </div>
19  );
20}

Props

Prop	Type	Default	Description
`origin`	ConfettiOrigin	"bottom"	Where bursts originate by default (named edges or { x, y }).
`autoFire`	boolean	false	Auto-fire on mount.
`loopMs`	number	0	Auto-fire every N ms. 0 disables looping.
`showTrigger`	boolean	true	Render the demo Fire button.
`triggerLabel`	string	"Celebrate again"	Demo trigger label.