1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
"use client"
import type React from "react"
import { useRef, useEffect } from "react"
interface WaveEffectProps {
color: string
triggerWave: boolean
mousePosition: { x: number; y: number }
}
const WaveEffect: React.FC<WaveEffectProps> = ({ color, triggerWave, mousePosition }) => {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext("2d")
if (!ctx) return
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let animationFrameId: number
const waves: { x: number; y: number; radius: number; opacity: number }[] = []
const createWave = (x: number, y: number) => {
waves.push({ x, y, radius: 0, opacity: 0.5 })
}
const drawWaves = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
waves.forEach((wave, index) => {
ctx.beginPath()
ctx.arc(wave.x, wave.y, wave.radius, 0, Math.PI * 2)
ctx.strokeStyle = `rgba(${color}, ${wave.opacity})`
ctx.lineWidth = 2
ctx.stroke()
// Slow down the expansion rate
wave.radius += 1
// Slow down the fade-out rate
wave.opacity -= 0.005
if (wave.opacity <= 0) {
waves.splice(index, 1)
}
})
animationFrameId = requestAnimationFrame(drawWaves)
}
if (triggerWave) {
createWave(mousePosition.x, mousePosition.y)
}
drawWaves()
return () => {
cancelAnimationFrame(animationFrameId)
}
}, [color, triggerWave, mousePosition])
return <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full pointer-events-none" />
}
export default WaveEffect
|
