50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T164b,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties, PointerEvent, ReactNode } from "react"; import { cn } from "../../utils"; import "./glare-card.css"; export interface GlareCardProps { /** Additional CSS classes for the card content wrapper. */ className?: string; /** Card content. */ children?: ReactNode; } interface Point { x: number; y: number; } /** * The full inline custom-property string, rebuilt wholesale on every pointer * move and on pointer leave — mirroring the Svelte source, where the style * attribute is a single derived string re-rendered whenever glare/rotate/ * background state changes (which also clobbers the enter-timeout's * `--duration: 0s` override on the next move, exactly as the source does). */ function cssVars(glare: Point, rotate: Point, background: Point): string { return `--m-x:${glare.x}%;--m-y:${glare.y}%;--r-x:${rotate.x}deg;--r-y:${rotate.y}deg;--bg-x:${background.x}%;--bg-y:${background.y}%;--duration:300ms;--foil-size:100%;--opacity:0;--radius:48px;--easing:ease;--transition:var(--duration) var(--easing);`; } const initialStyle = { "--m-x": "50%", "--m-y": "50%", "--r-x": "0deg", "--r-y": "0deg", "--bg-x": "50%", "--bg-y": "50%", "--duration": "300ms", "--foil-size": "100%", "--opacity": "0", "--radius": "48px", "--easing": "ease", "--transition": "var(--duration) var(--easing)", } as CSSProperties; export function GlareCard({ className = "", children }: GlareCardProps) { const refElement = useRef(null); const isPointerInside = useRef(false); const timeoutId = useRef | undefined>(undefined); // Per-frame values that only drive the style attribute — never state. const glare = useRef({ x: 50, y: 50 }); const background = useRef({ x: 50, y: 50 }); const rotate = useRef({ x: 0, y: 0 }); useEffect(() => { return () => { if (timeoutId.current) clearTimeout(timeoutId.current); }; }, []); function writeVars() { refElement.current?.setAttribute( "style", cssVars(glare.current, rotate.current, background.current) ); } function handlePointerMove(event: PointerEvent) { const rotateFactor = 0.4; const rect = refElement.current?.getBoundingClientRect(); if (rect) { const position = { x: event.clientX - rect.left, y: event.clientY - rect.top, }; const percentage = { x: (100 / rect.width) * position.x, y: (100 / rect.height) * position.y, }; const delta = { x: percentage.x - 50, y: percentage.y - 50, }; background.current.x = 50 + percentage.x / 4 - 12.5; background.current.y = 50 + percentage.y / 3 - 16.67; rotate.current.x = -(delta.x / 3.5) * rotateFactor; rotate.current.y = (delta.y / 2) * rotateFactor; glare.current.x = percentage.x; glare.current.y = percentage.y; writeVars(); } } function handlePointerEnter() { isPointerInside.current = true; if (timeoutId.current) clearTimeout(timeoutId.current); timeoutId.current = setTimeout(() => { if (isPointerInside.current && refElement.current) { refElement.current.style.setProperty("--duration", "0s"); } }, 300); } function handlePointerLeave() { isPointerInside.current = false; if (timeoutId.current) clearTimeout(timeoutId.current); if (refElement.current) { refElement.current.style.removeProperty("--duration"); rotate.current = { x: 0, y: 0 }; writeVars(); } } return (

{children}

); } 53:T677,/* * Ported from the Svelte