Confetti

1"use client";
2 
3import {
4  AbsoluteFill,
5  interpolate,
6  useCurrentFrame,
7  useVideoConfig,
8} from "remotion";
9 
10export interface ConfettiProps {
11  /** Number of confetti pieces. */
12  particleCount?: number;
13  colors?: string[];
14  /** Burst origin as a 0..1 fraction of the canvas. */
15  originX?: number;
16  originY?: number;
17  /** Frame the burst fires on. */
18  startFrame?: number;
19  /** Lifetime of the burst, in frames. */
20  lifetime?: number;
21  /** Initial launch speed (px/frame at the 720px reference height). */
22  power?: number;
23  /** Downward acceleration (px/frame² at the 720px reference height). */
24  gravity?: number;
25  /** Base piece size in reference px. */
26  size?: number;
27  /** PRNG seed — same seed renders an identical burst every time. */
28  seed?: number;
29}
30 
31export interface Particle {
32  angle: number;
33  speed: number;
34  color: string;
35  size: number;
36  rot0: number;
37  spin: number;
38  drift: number;
39}
40 
41const DEFAULT_COLORS = [
42  "#1d9bf0",
43  "#ff5da2",
44  "#ffd23f",
45  "#22c55e",
46  "#a855f7",
47  "#ff7a45",
48];
49 
50// --- Pure helpers (unit-tested) -------------------------------------------
51 
52/** Deterministic PRNG (mulberry32) — returns a function yielding [0, 1). */
53export function mulberry32(seed: number): () => number {
54  let a = seed >>> 0;
55  return () => {
56    a = (a + 0x6d2b79f5) | 0;
57    let t = Math.imul(a ^ (a >>> 15), 1 | a);
58    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
59    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
60  };
61}
62 
63/** Build a deterministic particle set for a seed (stable across renders). */
64export function makeParticles({
65  count,
66  seed,
67  colors,
68}: {
69  count: number;
70  seed: number;
71  colors: string[];
72}): Particle[] {
73  const rand = mulberry32(seed);
74  const palette = colors.length > 0 ? colors : DEFAULT_COLORS;
75  const out: Particle[] = [];
76  for (let i = 0; i < count; i++) {
77    const angle = rand() * Math.PI * 2;
78    const speed = 0.35 + 0.65 * rand();
79    out.push({
80      angle,
81      speed,
82      color: palette[Math.floor(rand() * palette.length)],
83      size: 0.7 + 0.6 * rand(),
84      rot0: rand() * Math.PI * 2,
85      spin: (rand() - 0.5) * 0.6,
86      drift: (rand() - 0.5) * 2,
87    });
88  }
89  return out;
90}
91 
92/** Opacity envelope over a particle's lifetime: quick fade-in, slow fade-out. */
93export function particleOpacity(tt: number, lifetime: number): number {
94  if (tt < 0 || tt > lifetime) return 0;
95  const fadeIn = interpolate(tt, [0, 4], [0, 1], {
96    extrapolateLeft: "clamp",
97    extrapolateRight: "clamp",
98// … truncated