confetti-burst

1import { interpolate, random, useCurrentFrame, useVideoConfig } from "remotion";
2import { DURATION, EASING } from "@/remotion/lib/motion-tokens";
3 
4export type ConfettiBurstProps = {
5  count?: number;
6  originX?: number;
7  originY?: number;
8  spread?: number;
9  seed?: string;
10  colors?: string[];
11  durationInFrames?: number;
12};
13 
14const DEFAULT_COLORS = ["#e8b86d", "#2dd4bf", "#f472b6", "#f59e0b", "#fafafa"];
15 
16type Particle = {
17  angle: number;
18  speed: number;
19  spin: number;
20  size: number;
21  color: string;
22  wobble: number;
23  shape: "rect" | "circle";
24  popDelay: number;
25};
26 
27function createParticles(count: number, spread: number, colors: string[], seed: string): Particle[] {
28  return Array.from({ length: count }, (_, index) => {
29    const angle = -Math.PI / 2 + (random(`${seed}-angle-${index}`) - 0.5) * spread;
30    const speed = 220 + random(`${seed}-speed-${index}`) * 380;
31 
32    return {
33      angle,
34      speed,
35      spin: (random(`${seed}-spin-${index}`) - 0.5) * 720,
36      size: 6 + random(`${seed}-size-${index}`) * 10,
37      color: colors[index % colors.length],
38      wobble: random(`${seed}-wobble-${index}`) * 40,
39      shape: random(`${seed}-shape-${index}`) > 0.5 ? "circle" : "rect",
40      popDelay: random(`${seed}-pop-${index}`) * 3,
41    };
42  });
43}
44 
45export const ConfettiBurst: React.FC<ConfettiBurstProps> = ({
46  count = 48,
47  originX = 50,
48  originY = 42,
49  spread = Math.PI * 0.9,
50  seed = "confetti",
51  colors = DEFAULT_COLORS,
52  durationInFrames = DURATION.slow,
53}) => {
54  const frame = useCurrentFrame();
55  const { width, height, fps } = useVideoConfig();
56  const particles = createParticles(count, spread, colors, seed);
57  const gravity = 680;
58  const drag = 1.6;
59  const time = frame / fps;
60  const fade = interpolate(frame, [durationInFrames * 0.55, durationInFrames], [1, 0], {
61    extrapolateLeft: "clamp",
62    extrapolateRight: "clamp",
63    easing: EASING.exit,
64  });
65 
66  const originPxX = (originX / 100) * width;
67  const originPxY = (originY / 100) * height;
68 
69  return (
70    <svg
71      style={{
72        position: "absolute",
73        inset: 0,
74        overflow: "visible",
75        pointerEvents: "none",
76      }}
77    >
78      {particles.map((particle, index) => {
79        const vx = Math.cos(particle.angle) * particle.speed;
80        const vy = Math.sin(particle.angle) * particle.speed;
81        // Air drag decays outward velocity over time; gravity still integrates linearly.
82        const settle = (1 - Math.exp(-drag * time)) / drag;
83// … truncated