Glow Card

1"use client";
2import type React from "react";
3import { useRef, useEffect, useState, useCallback, useMemo } from "react";
4import { cn } from "@/lib/utils";
5 
6interface Particle {
7  id: number;
8  x: number;
9  y: number;
10  vx: number;
11  vy: number;
12  size: number;
13  life: number;
14  color: string;
15}
16 
17interface GlowCardProps {
18  children: React.ReactNode;
19  className?: string;
20  variant?: "liquid" | "laser" | "cosmic" | "glitch";
21  intensity?: number;
22  liquidColor?: string;
23  laserColor?: string;
24  glitchColor1?: string;
25  glitchColor2?: string;
26  disabled?: boolean;
27  allowCustomBackground?: boolean;
28}
29 
30export function GlowCard({
31  children,
32  className,
33  variant = "liquid",
34  intensity = 0.8,
35  liquidColor = "#3b82f6",
36  laserColor = "#ff0000",
37  glitchColor1 = "#ff0064",
38  glitchColor2 = "#00ff64",
39  disabled = false,
40  allowCustomBackground = false,
41  ...props
42}: GlowCardProps & React.HTMLAttributes<HTMLDivElement>) {
43  const containerRef = useRef<HTMLDivElement>(null);
44  const animationRef = useRef<number>(0);
45  const waveTimeRef = useRef<number>(0);
46  const frameCountRef = useRef<number>(0);
47  const lastMouseMoveRef = useRef<number>(0);
48  const intersectionRef = useRef<IntersectionObserver | null>(null);
49  const [isHovered, setIsHovered] = useState(false);
50  const [isVisible, setIsVisible] = useState(false);
51  const [mousePos, setMousePos] = useState({ x: 50, y: 50 });
52  const [particles, setParticles] = useState<Particle[]>([]);
53  const [ripples, setRipples] = useState<
54    Array<{ id: number; x: number; y: number; time: number }>
55  >([]);
56  const [glitchOffset, setGlitchOffset] = useState({ x: 0, y: 0 });
57  const colorData = useMemo(() => {
58    const hexToRgb = (hex: string) => {
59      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
60      return result
61        ? {
62            r: Number.parseInt(result[1], 16),
63            g: Number.parseInt(result[2], 16),
64            b: Number.parseInt(result[3], 16),
65          }
66        : { r: 59, g: 130, b: 246 };
67    };
68 
69    return {
70      rgb: hexToRgb(liquidColor),
71      laserRgb: hexToRgb(laserColor),
72      glitch1Rgb: hexToRgb(glitchColor1),
73      glitch2Rgb: hexToRgb(glitchColor2),
74    };
75  }, [liquidColor, laserColor, glitchColor1, glitchColor2]);
76 
77  // Generate cosmic particles
78  const generateCosmicParticles = useCallback(
79    (centerX: number, centerY: number) => {
80      const newParticles: Particle[] = [];
81      for (let i = 0; i < 10; i++) {
82// … truncated