"use client"; import { useRef, useState } from "react"; import { motion, useMotionValue, useMotionTemplate } from "framer-motion"; import { cn } from "@/lib/utils"; export function GlareCard({ children, className, }: { children: React.ReactNode; className?: string; }) { const ref = useRef(null); const mouseX = useMotionValue(50); const mouseY = useMotionValue(50); const [hovering, setHovering] = useState(false); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; mouseX.set(((e.clientX - rect.left) / rect.width) * 100); mouseY.set(((e.clientY - rect.top) / rect.height) * 100); } const glare = useMotionTemplate`linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) ${mouseX}%, rgba(124,108,255,0.25) calc(${mouseX}% + 15%), transparent 60%)`; return (

setHovering(true)} onMouseLeave={() => setHovering(false)} className={cn( "group relative overflow-hidden rounded-2xl border border-line bg-panel p-8", className )} style={{ perspective: 800 }} >

{children}

); } export default function Demo() { return (

✧

Holographic sheen

A light sweep glides across the surface as your cursor moves, mimicking a foil trading card.

); }

Glare Card

Holographic sheen