4e: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"] 4f:T2a87,"use client" import * as React from "react" import { cn } from "@/lib/utils" type GlassOrbStatus = "idle" | "active" | "loading" interface GlassOrbProps extends React.HTMLAttributes { /** Visual state that changes the ring, glow gradient, and pulse. */ status?: GlassOrbStatus /** Size of the orb. */ size?: "sm" | "md" | "lg" /** Accessible label. When set, the orb is announced as a status region. */ label?: string /** Whether the orb follows the cursor with elastic motion. */ followCursor?: boolean /** Whether to emit soft glass particles when moving quickly. */ showTrails?: boolean } const sizes = { sm: 96, md: 140, lg: 190, } as const interface StatusConfig { ring: string glow: string pulse: boolean } const statusStyles: Record = { idle: { ring: "border-cyan-300/20", glow: [ "radial-gradient(circle at top left, rgba(255,255,255,0.3), transparent 35%)", "radial-gradient(circle at bottom right, rgba(34,211,238,0.24), transparent 28%)", "radial-gradient(circle at center, rgba(139,92,246,0.2), rgba(56,189,248,0.08) 50%)", "linear-gradient(180deg, rgba(255,255,255,0.2), rgba(15,23,42,0.1))", ].join(", "), pulse: false, }, active: { ring: "border-blue-200/30", glow: [ "radial-gradient(circle at top left, rgba(255,255,255,0.34), transparent 35%)", "radial-gradient(circle at bottom right, rgba(96,165,250,0.3), transparent 28%)", "radial-gradient(circle at center, rgba(168,85,247,0.28), rgba(59,130,246,0.12) 50%)", "linear-gradient(180deg, rgba(255,255,255,0.24), rgba(15,23,42,0.1))", ].join(", "), pulse: false, }, loading: { ring: "border-white/25", glow: [ "radial-gradient(circle at top left, rgba(255,255,255,0.32), transparent 35%)", "radial-gradient(circle at bottom right, rgba(103,232,249,0.3), transparent 28%)", "radial-gradient(circle at center, rgba(255,255,255,0.24), rgba(34,211,238,0.12) 50%)", "linear-gradient(180deg, rgba(255,255,255,0.24), rgba(15,23,42,0.1))", ].join(", "), pulse: true, }, } const MAX_TRAIL_PARTICLES = 16 const TRAIL_LIFE = 24 const TRAIL_FADE = 0.018 interface TrailParticle { el: HTMLSpanElement x: number y: number vx: number vy: number opacity: number life: number } const GlassOrb = React.forwardRef( ( { className, size = "md", status = "idle", label, followCursor = true, showTrails = true, ...props }, ref, ) => { const rootRef = React.useRef(null) const orbRef = React.useRef(null) const particleLayerRef = React.useRef(null) const particlesRef = React.useRef([]) const targetRef = React.useRef({ x: 0, y: 0 }) const motionRef = React.useRef({ x: 0, y: 0, vx: 0, vy: 0 }) const frameRef = React.useRef(null) const [reducedMotion, setReducedMotion] = React.useState(false) const sizePx = sizes[size] const config = statusStyles[status] React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement) // Respect the user's reduced-motion preference. React.useEffect(() => { if (typeof window.matchMedia !== "function") return const mql = window.matchMedia("(prefers-reduced-motion: reduce)") const onChange = () => setReducedMotion(mql.matches) onChange() mql.addEventListener("change", onChange) return () => mql.removeEventListener("change", onChange) }, []) // Center the orb, re-centering when the container resizes. React.useLayoutEffect(() => { const el = rootRef.current if (!el) return const center = () => { const rect = el.getBoundingClientRect() const x = Math.max(0, rect.width / 2 - sizePx / 2) const y = Math.max(0, rect.height / 2 - sizePx / 2) targetRef.current = { x, y } motionRef.current = { x, y, vx: 0, vy: 0 } if (orbRef.current) { orbRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)` } } center() if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver(center) observer.observe(el) return () => observer.disconnect() } }, [sizePx]) // Track the pointer for cursor-following. React.useEffect(() => { if (!followCursor || reducedMotion) return const handlePointerMove = (event: PointerEvent) => { const el = rootRef.current if (!el) return const rect = el.getBoundingClientRect() targetRef.current = { x: event.clientX - rect.left - sizePx / 2, y: event.clientY - rect.top - sizePx / 2, } } window.addEventListener("pointermove", handlePointerMove, { passive: true }) return () => window.removeEventListener("pointermove", handlePointerMove) }, [followCursor, reducedMotion, sizePx]) // Spring physics + particle trails, written directly to the DOM. React.useEffect(() => { if (!followCursor || reducedMotion) return const spring = 0.14 const damping = 0.8 const animate = () => { const target = targetRef.current const motion = motionRef.current const dx = target.x - motion.x const dy = target.y - motion.y motion.vx = motion.vx * damping + dx * spring motion.vy = motion.vy * damping + dy * spring motion.x += motion.vx motion.y += motion.vy const speed = Math.sqrt(motion.vx ** 2 + motion.vy ** 2) const scale = 1 + Math.min(speed / 120, 0.16) const rotation = speed * 0.16 if (orbRef.current) { orbRef.current.style.transform = `translate3d(${motion.x}px, ${motion.y}px, 0) scale(${scale}) rotate(${rotation}deg)` } if (showTrails) { const particles = particlesRef.current if ( speed > 12 && particles.length < MAX_TRAIL_PARTICLES && Math.random() < 0.15 && particleLayerRef.current ) { const layer = particleLayerRef.current const trailSize = 4 + Math.min(speed / 8, 12) const el = document.createElement("span") el.className = "absolute rounded-full bg-white/70 blur-[2px] pointer-events-none" el.style.left = `${motion.x + sizePx / 2}px` el.style.top = `${motion.y + sizePx / 2}px` el.style.width = `${trailSize}px` el.style.height = `${trailSize}px` el.style.opacity = "0.5" el.style.transform = "translate(-50%, -50%)" layer.appendChild(el) particles.push({ el, x: 0, y: 0, vx: motion.vx * 0.1 + (Math.random() - 0.5) * 0.8, vy: motion.vy * 0.1 + (Math.random() - 0.5) * 0.8, opacity: 0.5, life: TRAIL_LIFE, }) } for (let index = particles.length - 1; index >= 0; index--) { const particle = particles[index] particle.life -= 1 particle.opacity -= TRAIL_FADE particle.x += particle.vx particle.y += particle.vy particle.el.style.transform = `translate(-50%, -50%) translate(${particle.x}px, ${particle.y}px)` particle.el.style.opacity = particle.opacity.toFixed(3) if (particle.life <= 0 || particle.opacity <= 0) { particle.el.remove() particles.splice(index, 1) } } } frameRef.current = window.requestAnimationFrame(animate) } frameRef.current = window.requestAnimationFrame(animate) return () => { if (frameRef.current) window.cancelAnimationFrame(frameRef.current) for (const particle of particlesRef.current) particle.el.remove() particlesRef.current = [] } }, [followCursor, reducedMotion, showTrails, sizePx]) return (

{label ? (

{label}

) : null}

{/* Particle trail layer (populated imperatively by the animation loop). */}

) }, ) GlassOrb.displayName = "GlassOrb" export { GlassOrb } export type { GlassOrbStatus, GlassOrbProps } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/innovative/glass-orb.tsx","content":"$4f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]