Bolt Strike

1'use client';
2import React, { useEffect, useRef } from 'react';
3import { cn } from '@/lib/utils';
4 
5type BoltStrikeProps = {
6  color?: string;
7  speed?: number;
8  intensity?: number;
9  className?: string;
10  children?: React.ReactNode;
11};
12 
13class Particle {
14  x: number;
15  y: number;
16  vx: number;
17  vy: number;
18  life: number;
19  maxLife: number;
20  size: number;
21 
22  constructor(x: number, y: number) {
23    this.x = x;
24    this.y = y;
25    const angle = Math.random() * Math.PI * 2;
26    const speed = 2 + Math.random() * 4;
27    this.vx = Math.cos(angle) * speed;
28    this.vy = Math.sin(angle) * speed;
29    this.life = 0;
30    this.maxLife = 30 + Math.random() * 30;
31    this.size = 2 + Math.random() * 2;
32  }
33 
34  update() {
35    this.x += this.vx;
36    this.y += this.vy;
37    this.vx *= 0.96;
38    this.vy *= 0.96;
39    this.life++;
40  }
41 
42  draw(ctx: CanvasRenderingContext2D, color: string) {
43    const alpha = Math.max(0, 1 - this.life / this.maxLife);
44    const radius = Math.max(0.1, this.size * alpha);
45    ctx.shadowBlur = 10;
46    ctx.shadowColor = color;
47    ctx.fillStyle =
48      color +
49      Math.floor(alpha * 255)
50        .toString(16)
51        .padStart(2, '0');
52    ctx.beginPath();
53    ctx.arc(this.x, this.y, radius, 0, Math.PI * 2);
54    ctx.fill();
55    ctx.shadowBlur = 0;
56  }
57 
58  isDead() {
59    return this.life >= this.maxLife;
60  }
61}
62 
63class Lightning {
64  segments: Array<{ x: number; y: number }>;
65  life: number;
66  maxLife: number;
67  thickness: number;
68 
69  constructor(startX: number, startY: number, endX: number, endY: number) {
70    this.segments = [];
71    this.life = 0;
72    this.maxLife = 12;
73    this.thickness = 1.5 + Math.random() * 2;
74    this.generate(startX, startY, endX, endY);
75  }
76 
77  generate(startX: number, startY: number, endX: number, endY: number) {
78    const distance = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2);
79    const steps = Math.max(6, Math.floor(distance / 25));
80    const roughness = distance / 12;
81 
82    this.segments.push({ x: startX, y: startY });
83 
84    for (let i = 1; i < steps; i++) {
85      const t = i / steps;
86      const x =
87        startX + (endX - startX) * t + (Math.random() - 0.5) * roughness;
88      const y =
89        startY + (endY - startY) * t + (Math.random() - 0.5) * roughness;
90      this.segments.push({ x, y });
91    }
92 
93    this.segments.push({ x: endX, y: endY });
94  }
95 
96  update() {
97    this.life++;
98  }
99 
100  draw(ctx: CanvasRenderingContext2D, color: string) {
101    const alpha = Math.max(0, 1 - this.life / this.maxLife);
102 
103// … truncated