50: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"] 51:T281d,'use client'; import { useRef, useCallback, useState, useEffect } from 'react'; function parseHSL(hslStr) { const match = hslStr.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/); if (!match) return { h: 40, s: 80, l: 80 }; return { h: parseFloat(match[1]), s: parseFloat(match[2]), l: parseFloat(match[3]) }; } function buildBoxShadow(glowColor, intensity) { const { h, s, l } = parseHSL(glowColor); const base = `${h}deg ${s}% ${l}%`; const layers = [ [0, 0, 0, 1, 100, true], [0, 0, 1, 0, 60, true], [0, 0, 3, 0, 50, true], [0, 0, 6, 0, 40, true], [0, 0, 15, 0, 30, true], [0, 0, 25, 2, 20, true], [0, 0, 50, 2, 10, true], [0, 0, 1, 0, 60, false], [0, 0, 3, 0, 50, false], [0, 0, 6, 0, 40, false], [0, 0, 15, 0, 30, false], [0, 0, 25, 2, 20, false], [0, 0, 50, 2, 10, false], ]; return layers.map(([x, y, blur, spread, alpha, inset]) => { const a = Math.min(alpha * intensity, 100); return `${inset ? 'inset ' : ''}${x}px ${y}px ${blur}px ${spread}px hsl(${base} / ${a}%)`; }).join(', '); } function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); } function easeInCubic(x) { return x * x * x; } function animateValue({ start = 0, end = 100, duration = 1000, delay = 0, ease = easeOutCubic, onUpdate, onEnd }) { const t0 = performance.now() + delay; function tick() { const elapsed = performance.now() - t0; const t = Math.min(elapsed / duration, 1); onUpdate(start + (end - start) * ease(t)); if (t < 1) requestAnimationFrame(tick); else if (onEnd) onEnd(); } setTimeout(() => requestAnimationFrame(tick), delay); } const GRADIENT_POSITIONS = ['80% 55%', '69% 34%', '8% 6%', '41% 38%', '86% 85%', '82% 18%', '51% 4%']; const COLOR_MAP = [0, 1, 2, 0, 1, 2, 1]; function buildMeshGradients(colors) { const gradients = []; for (let i = 0; i < 7; i++) { const c = colors[Math.min(COLOR_MAP[i], colors.length - 1)]; gradients.push(`radial-gradient(at ${GRADIENT_POSITIONS[i]}, ${c} 0px, transparent 50%)`); } gradients.push(`linear-gradient(${colors[0]} 0 100%)`); return gradients; } function isLightColor(color) { const value = color.trim().replace('#', ''); if (!/^[\da-f]{3}([\da-f]{3})?$/i.test(value)) return false; const hex = value.length === 3 ? value.split('').map(char => char + char).join('') : value; const red = parseInt(hex.slice(0, 2), 16); const green = parseInt(hex.slice(2, 4), 16); const blue = parseInt(hex.slice(4, 6), 16); return red * 0.2126 + green * 0.7152 + blue * 0.0722 > 180; } const BorderGlow = ({ children, className = '', edgeSensitivity = 30, glowColor = '40 80 80', backgroundColor = '#120F17', borderRadius = 28, glowRadius = 40, glowIntensity = 1.0, coneSpread = 25, animated = false, colors = ['#c084fc', '#f472b6', '#38bdf8'], fillOpacity = 0.5, }) => { const cardRef = useRef(null); const [isHovered, setIsHovered] = useState(false); const [cursorAngle, setCursorAngle] = useState(45); const [edgeProximity, setEdgeProximity] = useState(0); const [sweepActive, setSweepActive] = useState(false); const getCenterOfElement = useCallback((el) => { const { width, height } = el.getBoundingClientRect(); return [width / 2, height / 2]; }, []); const getEdgeProximity = useCallback((el, x, y) => { const [cx, cy] = getCenterOfElement(el); const dx = x - cx; const dy = y - cy; let kx = Infinity; let ky = Infinity; if (dx !== 0) kx = cx / Math.abs(dx); if (dy !== 0) ky = cy / Math.abs(dy); return Math.min(Math.max(1 / Math.min(kx, ky), 0), 1); }, [getCenterOfElement]); const getCursorAngle = useCallback((el, x, y) => { const [cx, cy] = getCenterOfElement(el); const dx = x - cx; const dy = y - cy; if (dx === 0 && dy === 0) return 0; const radians = Math.atan2(dy, dx); let degrees = radians * (180 / Math.PI) + 90; if (degrees < 0) degrees += 360; return degrees; }, [getCenterOfElement]); const handlePointerMove = useCallback((e) => { const card = cardRef.current; if (!card) return; const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setEdgeProximity(getEdgeProximity(card, x, y)); setCursorAngle(getCursorAngle(card, x, y)); }, [getEdgeProximity, getCursorAngle]); useEffect(() => { if (!animated) return; const angleStart = 110; const angleEnd = 465; setSweepActive(true); setCursorAngle(angleStart); animateValue({ duration: 500, onUpdate: v => setEdgeProximity(v / 100) }); animateValue({ ease: easeInCubic, duration: 1500, end: 50, onUpdate: v => { setCursorAngle((angleEnd - angleStart) * (v / 100) + angleStart); }}); animateValue({ ease: easeOutCubic, delay: 1500, duration: 2250, start: 50, end: 100, onUpdate: v => { setCursorAngle((angleEnd - angleStart) * (v / 100) + angleStart); }}); animateValue({ ease: easeInCubic, delay: 2500, duration: 1500, start: 100, end: 0, onUpdate: v => setEdgeProximity(v / 100), onEnd: () => setSweepActive(false), }); }, [animated]); const colorSensitivity = edgeSensitivity + 20; const isVisible = isHovered || sweepActive; const borderOpacity = isVisible ? Math.max(0, (edgeProximity * 100 - colorSensitivity) / (100 - colorSensitivity)) : 0; const glowOpacity = isVisible ? Math.max(0, (edgeProximity * 100 - edgeSensitivity) / (100 - edgeSensitivity)) : 0; const meshGradients = buildMeshGradients(colors); const borderBg = meshGradients.map(g => `${g} border-box`); const fillBg = meshGradients.map(g => `${g} padding-box`); const angleDeg = `${cursorAngle.toFixed(3)}deg`; const lightSurface = isLightColor(backgroundColor); return (

setIsHovered(true)} onPointerLeave={() => setIsHovered(false)} className={`relative grid isolate border ${className}`} style={{ background: backgroundColor, borderColor: lightSurface ? 'rgb(24 24 27 / 12%)' : 'rgb(255 255 255 / 15%)', borderRadius: `${borderRadius}px`, transform: 'translate3d(0, 0, 0.01px)', boxShadow: lightSurface ? 'rgb(24 24 27 / 4%) 0 1px 2px, rgb(24 24 27 / 5%) 0 8px 24px' : 'rgba(0,0,0,0.1) 0 1px 2px, rgba(0,0,0,0.1) 0 2px 4px, rgba(0,0,0,0.1) 0 4px 8px, rgba(0,0,0,0.1) 0 8px 16px, rgba(0,0,0,0.1) 0 16px 32px, rgba(0,0,0,0.1) 0 32px 64px', }} > {/* mesh gradient border */}

{/* mesh gradient fill near edges */}

{/* outer glow */}

{children}

); }; export default BorderGlow; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"BorderGlow/BorderGlow.jsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]