Success Confetti

Installation

$ pnpm dlx shadcn@latest add @remocn/success-confetti

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { SuccessConfetti } from "@/components/remocn/success-confetti";

const SuccessConfettiScene = () => (
  <SuccessConfetti
    text="Merged!"
    count={60}
    colors={["#ff5e3a", "#22c55e", "#0ea5e9", "#facc15", "#a855f7"]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="SuccessConfetti"
    component={SuccessConfettiScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`count`	`number`	`60`	Number of confetti particles
`colors`	`string[]`	`["#ff5e3a","#22c55e","#0ea5e9","#facc15","#a855f7"]`	Pool of colors that particles are randomly drawn from
`originX`	`number`	`0.5`	Horizontal burst origin as a fraction of the frame width (0..1)
`originY`	`number`	`0.5`	Vertical burst origin as a fraction of the frame height (0..1)
`gravity`	`number`	`0.4`	Downward acceleration applied per frame squared
`velocity`	`number`	`12`	Base outward speed for each particle in pixels per frame
`text`	`string`	`"Merged!"`	Optional headline rendered in the middle of the burst. Pass an empty string to hide.
`textColor`	`string`	`"#171717"`	Color of the headline
`background`	`string`	`"#fafafa"`	Frame background color
`seed`	`string`	`"remocn"`	Seed used to generate particle randomness. Change to get a different burst.
`className`	`string`	—	Optional className passed to the outer container