blob: 2bf6793672c41699ef8335c4f89b605ec9e22ed8 (
plain) (
blame)
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
|
import { createContext, useContext, useEffect, useRef, useState } from "react";
import { SaturnEffect } from "@/lib/effects/saturn";
const SaturnEffectContext = createContext<SaturnEffect | null>(null);
export function useSaturnEffect() {
return useContext(SaturnEffectContext);
}
export function ParticleBackground({
children,
}: {
children?: React.ReactNode;
}) {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [effect, setEffect] = useState<SaturnEffect | null>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
let saturnEffect: SaturnEffect | null = null;
try {
saturnEffect = new SaturnEffect(canvas);
setEffect(saturnEffect);
} catch (err) {
console.warn("SaturnEffect initialization failed:", err);
}
const resizeHandler = () => {
saturnEffect?.resize(window.innerWidth, window.innerHeight);
};
window.addEventListener("resize", resizeHandler);
return () => {
window.removeEventListener("resize", resizeHandler);
saturnEffect?.destroy();
setEffect(null);
};
}, []);
return (
<SaturnEffectContext.Provider value={effect}>
<canvas
ref={canvasRef}
className="absolute inset-0 -z-10 pointer-events-none"
/>
{children}
</SaturnEffectContext.Provider>
);
}
export default ParticleBackground;
|