# Confetti
URL: https://remocn.dev/docs/effects/confetti

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

- Install: `npx shadcn@latest add @remocn/confetti`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx 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.

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

## Use when
- A milestone moment needs a celebratory payoff — product launch, plan completion, success screen.
- You want a deterministic particle burst that renders identically on every export pass (seed-controlled).
- The effect should fire mid-composition at a specific frame via `startFrame`.

## Don't use when
- The video has a clean, minimal, or corporate tone — confetti reads as celebration-specific and breaks professional pacing; use a subtle shader backdrop like `shader-grain-gradient` instead.
- You need a looping ambient particle background — confetti is a one-shot burst with gravity falloff, not a loop; use `shader-dot-orbit` for sustained motion.
- The burst should originate from a specific UI element offscreen — `originX`/`originY` are normalized 0–1 to the frame, not element-relative; compose with `AbsoluteFill` positioning instead.