Confetti · remocn

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:

// 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.

Props

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

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.