52: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"] 53: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"] 54:T1e96,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties } from "react"; import { cn } from "../../utils"; export interface GlowingEffectProps { /** Blur amount for the glow. */ blur?: number; /** Inner zone radius ratio where glow deactivates. */ inactiveZone?: number; /** Extra proximity distance to activate glow. */ proximity?: number; /** Spread angle of the conic gradient. */ spread?: number; /** Color variant. */ variant?: "default" | "white"; /** Force glow visible. */ glow?: boolean; /** Additional CSS classes. */ className?: string; /** Disable mouse tracking. */ disabled?: boolean; /** Animation speed. */ movementDuration?: number; /** Border width in pixels. */ borderWidth?: number; } /** Read live on every tween step; missing `matchMedia` means "no preference". */ function prefersReducedMotion(): boolean { return ( typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ); } interface MotionState { lastPosition: { x: number; y: number }; animationFrameId: number; angleAnimationFrameId: number; currentAngle: number; targetAngle: number; animating: boolean; } export function GlowingEffect({ blur = 0, inactiveZone = 0.7, proximity = 0, spread = 20, variant = "default", glow = false, className = "", disabled = true, movementDuration = 2, borderWidth = 1, }: GlowingEffectProps) { const containerRef = useRef(null); const motionRef = useRef({ lastPosition: { x: 0, y: 0 }, animationFrameId: 0, angleAnimationFrameId: 0, currentAngle: 0, targetAngle: 0, animating: false, }); // Live mirror of the props the frame handlers read, so a mounted listener // always sees the latest values (the Svelte closures read reactive props). const liveRef = useRef({ inactiveZone, proximity, movementDuration }); useEffect(() => { liveRef.current = { inactiveZone, proximity, movementDuration }; }); // `disabled` is read once at mount, mirroring the Svelte onMount: toggling // it later does not attach/detach listeners on either side. const disabledAtMount = useRef(disabled); const containerStyle = { "--blur": `${blur}px`, "--spread": spread, "--start": "0", "--active": "0", "--glowingeffect-border-width": `${borderWidth}px`, "--repeating-conic-gradient-times": "5", "--gradient": variant === "white" ? `repeating-conic-gradient(from 236.84deg at 50% 50%, var(--black), var(--black) calc(25% / var(--repeating-conic-gradient-times)))` : `radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%), radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%), radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%), repeating-conic-gradient(from 236.84deg at 50% 50%, #dd7bbb 0%, #d79f1e calc(25% / var(--repeating-conic-gradient-times)), #5a922c calc(50% / var(--repeating-conic-gradient-times)), #4c7894 calc(75% / var(--repeating-conic-gradient-times)), #dd7bbb calc(100% / var(--repeating-conic-gradient-times)))`, } as CSSProperties; useEffect(() => { if (disabledAtMount.current) return; const state = motionRef.current; function animateAngle() { // Reduced motion: the arc snaps to the target (a duration of 0). The // state is still produced, only the glide is dropped. // Otherwise lerp speed is inversely proportional to movementDuration. const speed = prefersReducedMotion() ? 1 : 0.08 / Math.max(liveRef.current.movementDuration, 0.1); state.currentAngle = state.currentAngle + (state.targetAngle - state.currentAngle) * speed; if (containerRef.current) { containerRef.current.style.setProperty("--start", String(state.currentAngle)); } if (Math.abs(state.targetAngle - state.currentAngle) > 0.1) { state.angleAnimationFrameId = requestAnimationFrame(animateAngle); } else { state.currentAngle = state.targetAngle; if (containerRef.current) { containerRef.current.style.setProperty("--start", String(state.currentAngle)); } state.animating = false; } } function handleMove(e?: { x: number; y: number }) { if (!containerRef.current) return; if (state.animationFrameId) { cancelAnimationFrame(state.animationFrameId); } state.animationFrameId = requestAnimationFrame(() => { const container = containerRef.current; if (!container) return; const { left, top, width, height } = container.getBoundingClientRect(); const mouseX = e?.x ?? state.lastPosition.x; const mouseY = e?.y ?? state.lastPosition.y; if (e) { state.lastPosition = { x: mouseX, y: mouseY }; } const center: [number, number] = [left + width * 0.5, top + height * 0.5]; const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]); const inactiveRadius = 0.5 * Math.min(width, height) * liveRef.current.inactiveZone; if (distanceFromCenter < inactiveRadius) { container.style.setProperty("--active", "0"); return; } const { proximity: liveProximity } = liveRef.current; const isActive = mouseX > left - liveProximity && mouseX < left + width + liveProximity && mouseY > top - liveProximity && mouseY < top + height + liveProximity; container.style.setProperty("--active", isActive ? "1" : "0"); if (!isActive) return; const rawTarget = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90; // Shortest-path angle difference const angleDiff = ((rawTarget - state.currentAngle + 180) % 360) - 180; state.targetAngle = state.currentAngle + angleDiff; if (!state.animating) { state.animating = true; animateAngle(); } }); } function handlePointerMove(e: PointerEvent) { handleMove(e); } function handleScroll() { handleMove(); } window.addEventListener("scroll", handleScroll, { passive: true }); document.body.addEventListener("pointermove", handlePointerMove, { passive: true }); return () => { if (state.animationFrameId) cancelAnimationFrame(state.animationFrameId); if (state.angleAnimationFrameId) cancelAnimationFrame(state.angleAnimationFrameId); state.animating = false; window.removeEventListener("scroll", handleScroll); document.body.removeEventListener("pointermove", handlePointerMove); }; }, []); return ( <>

0 && "blur-[var(--blur)]", className, disabled && "!hidden" )} aria-hidden="true" >

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/glowing-effect/GlowingEffect.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/glowing-effect/GlowingEffect.tsx"},{"path":"react/src/components/glowing-effect/index.ts","content":"\"use client\";\n\nexport { GlowingEffect } from \"./GlowingEffect\";\nexport type { GlowingEffectProps } from \"./GlowingEffect\";\n","type":"registry:ui","target":"@ui/fancy/components/glowing-effect/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]