Confetti

Deterministic confetti burst for Remotion — seeded particles with gravity, spin, and flutter

Installation

$ pnpm dlx shadcn@latest add @remocn/confetti

Usage

Confetti is an overlay — render it on top of any scene and set startFrame to the frame the burst should fire:

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Confetti } from "@/components/remocn/confetti";
 
const ConfettiScene = () => (
  <Confetti
    startFrame={0}
    originX={0.5}
    originY={0.5}
    particleCount={160}
    seed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Confetti"
    component={ConfettiScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Every piece is generated from a seeded PRNG, so a given seed renders an identical burst on every machine — required for deterministic Remotion output and headless MP4 export. Particles launch radially from the origin, fall under gravity, and flutter as they spin.

Props10

Prop	Type	Default
particleCount	number140 Number of confetti pieces
colors	string[]6 brand colors Palette each piece is drawn from
originX	number0.5 Burst origin X as a 0..1 fraction of the canvas
originY	number0.5 Burst origin Y as a 0..1 fraction of the canvas
startFrame	number0 Frame the burst fires on
lifetime	number90 How long the burst lives, in frames
power	number17 Initial launch speed (px/frame at the 720px reference height)
gravity	number0.45 Downward acceleration (px/frame² at the 720px reference height)
size	number13 Base piece size in reference px
seed	number1 PRNG seed — the same seed renders an identical burst every time

particleCountnumber
Number of confetti pieces
Default140
colorsstring[]
Palette each piece is drawn from
Default6 brand colors
originXnumber
Burst origin X as a 0..1 fraction of the canvas
Default0.5
originYnumber
Burst origin Y as a 0..1 fraction of the canvas
Default0.5
startFramenumber
Frame the burst fires on
Default0
lifetimenumber
How long the burst lives, in frames
Default90
powernumber
Initial launch speed (px/frame at the 720px reference height)
Default17
gravitynumber
Downward acceleration (px/frame² at the 720px reference height)
Default0.45
sizenumber
Base piece size in reference px
Default13
seednumber
PRNG seed — the same seed renders an identical burst every time
Default1

Notes

Deterministic: Particles come from a mulberry32 seeded PRNG, never Math.random(), so renders are frame-stable and reproducible.
Overlay: The component is a transparent, pointer-events: none AbsoluteFill — layer it over any composition.
Used by: x-followers-overview fires this on the follower-count reveal.