Glare Card

1"use client";
2import { cn } from "@/lib/utils";
3import { useRef } from "react";
4 
5export const GlareCard = ({
6  children,
7  className,
8}: {
9  children: React.ReactNode;
10  className?: string;
11}) => {
12  const isPointerInside = useRef(false);
13  const refElement = useRef<HTMLDivElement>(null);
14  const state = useRef({
15    glare: {
16      x: 50,
17      y: 50,
18    },
19    background: {
20      x: 50,
21      y: 50,
22    },
23    rotate: {
24      x: 0,
25      y: 0,
26    },
27  });
28  const containerStyle = {
29    "--m-x": "50%",
30    "--m-y": "50%",
31    "--r-x": "0deg",
32    "--r-y": "0deg",
33    "--bg-x": "50%",
34    "--bg-y": "50%",
35    "--duration": "300ms",
36    "--foil-size": "100%",
37    "--opacity": "0",
38    "--radius": "48px",
39    "--easing": "ease",
40    "--transition": "var(--duration) var(--easing)",
41  } as any;
42 
43  const backgroundStyle = {
44    "--step": "5%",
45    "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
46    "--pattern": "var(--foil-svg) center/100% no-repeat",
47    "--rainbow":
48      "repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
49    "--diagonal":
50      "repeating-linear-gradient( 128deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12% ) var(--bg-x) var(--bg-y)/300% no-repeat",
51    "--shade":
52      "radial-gradient( farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120% ) var(--bg-x) var(--bg-y)/300% no-repeat",
53    backgroundBlendMode: "hue, hue, hue, overlay",
54  };
55 
56  const updateStyles = () => {
57    if (refElement.current) {
58      console.log(state.current);
59      const { background, rotate, glare } = state.current;
60      refElement.current?.style.setProperty("--m-x", `${glare.x}%`);
61      refElement.current?.style.setProperty("--m-y", `${glare.y}%`);
62// … truncated