Fireworks Background

1'use client';
2 
3import * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7const rand = (min: number, max: number): number =>
8  Math.random() * (max - min) + min;
9 
10const randInt = (min: number, max: number): number =>
11  Math.floor(Math.random() * (max - min) + min);
12 
13const randColor = (): string => `hsl(${randInt(0, 360)}, 100%, 50%)`;
14 
15type ParticleType = {
16  x: number;
17  y: number;
18  color: string;
19  speed: number;
20  direction: number;
21  vx: number;
22  vy: number;
23  gravity: number;
24  friction: number;
25  alpha: number;
26  decay: number;
27  size: number;
28  update: () => void;
29  draw: (ctx: CanvasRenderingContext2D) => void;
30  isAlive: () => boolean;
31};
32 
33function createParticle(
34  x: number,
35  y: number,
36  color: string,
37  speed: number,
38  direction: number,
39  gravity: number,
40  friction: number,
41  size: number,
42): ParticleType {
43  const vx = Math.cos(direction) * speed;
44  const vy = Math.sin(direction) * speed;
45  const alpha = 1;
46  const decay = rand(0.005, 0.02);
47 
48  return {
49    x,
50    y,
51    color,
52    speed,
53    direction,
54    vx,
55    vy,
56    gravity,
57    friction,
58    alpha,
59    decay,
60    size,
61    update() {
62      this.vx *= this.friction;
63      this.vy *= this.friction;
64      this.vy += this.gravity;
65      this.x += this.vx;
66      this.y += this.vy;
67      this.alpha -= this.decay;
68    },
69    draw(ctx: CanvasRenderingContext2D) {
70      ctx.save();
71      ctx.globalAlpha = this.alpha;
72      ctx.beginPath();
73      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
74      ctx.fillStyle = this.color;
75      ctx.fill();
76      ctx.restore();
77    },
78    isAlive() {
79      return this.alpha > 0;
80    },
81  };
82}
83 
84type FireworkType = {
85  x: number;
86  y: number;
87  targetY: number;
88  color: string;
89  speed: number;
90  size: number;
91  angle: number;
92  vx: number;
93  vy: number;
94  trail: { x: number; y: number }[];
95  trailLength: number;
96  exploded: boolean;
97  update: () => boolean;
98  explode: () => void;
99  draw: (ctx: CanvasRenderingContext2D) => void;
100};
101 
102function createFirework(
103  x: number,
104  y: number,
105  targetY: number,
106  color: string,
107  speed: number,
108  size: number,
109  particleSpeed: { min: number; max: number } | number,
110  particleSize: { min: number; max: number } | number,
111  onExplode: (particles: ParticleType[]) => void,
112): FireworkType {
113  const angle = -Math.PI / 2 + rand(-0.3, 0.3);
114  const vx = Math.cos(angle) * speed;
115  const vy = Math.sin(angle) * speed;
116  const trail: { x: number; y: number }[] = [];
117  const trailLength = randInt(10, 25);
118 
119// … truncated