62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T2c4d,"use client" import * as React from "react" import createGlobe from "cobe" import { useInView, useReducedMotion } from "motion/react" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" import { getShowcaseArcs, getShowcaseMarkers, showcaseConfigs, showcaseDefaultArcs, showcaseDefaultMarkers, } from "@/registry/default/ui/globe" const DEFAULT_KEY = "default" as const // --------------------------------------------------------------------------- // Theme → RGB for the WebGL globe (dark mode only; light matches the default demo look) // --------------------------------------------------------------------------- const CSS_RGB_RE = /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i function probeCssColorToRgb01(color: string): [number, number, number] { if (typeof document === "undefined") { return [0.5, 0.5, 0.5] } const el = document.createElement("div") el.style.color = color el.style.position = "fixed" el.style.left = "0" el.style.top = "0" el.style.opacity = "0" el.style.pointerEvents = "none" document.body.appendChild(el) const rgb = getComputedStyle(el).color document.body.removeChild(el) const m = rgb.match(CSS_RGB_RE) if (!m) { return [0.5, 0.5, 0.5] } return [Number(m[1]) / 255, Number(m[2]) / 255, Number(m[3]) / 255] } function cssVarTriplet(name: `--${string}`): [number, number, number] { return probeCssColorToRgb01(`var(${name})`) } function clamp01(n: number) { return Math.min(1, Math.max(0, n)) } function saturateRgb( rgb: [number, number, number], amount: number ): [number, number, number] { const lum = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2] return [ clamp01(lum + (rgb[0] - lum) * amount), clamp01(lum + (rgb[1] - lum) * amount), clamp01(lum + (rgb[2] - lum) * amount), ] } function useResolvedIsDark(): boolean { const { resolvedTheme } = useTheme() return resolvedTheme === "dark" } type CobeGlobeHandle = { update: (state: Record) => void destroy: () => void } function anchorLabelStyle( id: string, kind: "marker" | "arc" ): React.CSSProperties { const visible = kind === "marker" ? `--cobe-visible-${id}` : `--cobe-visible-arc-${id}` const anchor = kind === "marker" ? `--cobe-${id}` : `--cobe-arc-${id}` return { position: "absolute", bottom: "anchor(top)", filter: `blur(calc((1 - var(${visible}, 0)) * 8px))`, left: "anchor(center)", opacity: `var(${visible}, 0)`, positionAnchor: anchor, transform: "translateX(-50%)", transition: "opacity 0.3s ease, filter 0.3s ease", } as React.CSSProperties } const demoConfig = showcaseConfigs[DEFAULT_KEY] // --------------------------------------------------------------------------- // Default showcase globe (interactive COBE + CSS anchor labels) // --------------------------------------------------------------------------- export interface DefaultShowcaseGlobeProps { className?: string globeSize?: number } export function DefaultShowcaseGlobe({ className, globeSize = 520, }: DefaultShowcaseGlobeProps) { const canvasRef = React.useRef(null) const rootRef = React.useRef(null) const isInView = useInView(rootRef, { once: false, margin: "120px" }) const shouldReduceMotion = useReducedMotion() const isDark = useResolvedIsDark() const phiAutoRef = React.useRef(0) const pointerInteracting = React.useRef<{ x: number; y: number } | null>(null) const lastPointer = React.useRef<{ x: number; y: number; t: number } | null>( null ) const dragOffset = React.useRef({ phi: 0, theta: 0 }) const velocity = React.useRef({ phi: 0, theta: 0 }) const phiOffsetRef = React.useRef(0) const thetaOffsetRef = React.useRef(0) const isPausedRef = React.useRef(false) const speedRef = React.useRef(1) const bufferSize = globeSize * 2 const cobeMarkers = React.useMemo( () => getShowcaseMarkers(DEFAULT_KEY, demoConfig.markerSize), [] ) const cobeArcs = React.useMemo(() => getShowcaseArcs(DEFAULT_KEY), []) const handlePointerDown = React.useCallback( (e: React.PointerEvent) => { pointerInteracting.current = { x: e.clientX, y: e.clientY } if (canvasRef.current) { canvasRef.current.style.cursor = "grabbing" } isPausedRef.current = true }, [] ) const handlePointerMove = React.useCallback((e: PointerEvent) => { if (pointerInteracting.current === null) { return } const deltaX = e.clientX - pointerInteracting.current.x const deltaY = e.clientY - pointerInteracting.current.y dragOffset.current = { phi: deltaX / 300, theta: deltaY / 1000 } const now = Date.now() if (lastPointer.current) { const dt = Math.max(now - lastPointer.current.t, 1) const maxVelocity = 0.15 velocity.current = { phi: Math.max( -maxVelocity, Math.min( maxVelocity, ((e.clientX - lastPointer.current.x) / dt) * 0.3 ) ), theta: Math.max( -maxVelocity, Math.min( maxVelocity, ((e.clientY - lastPointer.current.y) / dt) * 0.08 ) ), } } lastPointer.current = { x: e.clientX, y: e.clientY, t: now } }, []) const handlePointerUp = React.useCallback(() => { if (pointerInteracting.current !== null) { phiOffsetRef.current += dragOffset.current.phi thetaOffsetRef.current += dragOffset.current.theta dragOffset.current = { phi: 0, theta: 0 } lastPointer.current = null } pointerInteracting.current = null if (canvasRef.current) { canvasRef.current.style.cursor = "grab" } isPausedRef.current = false }, []) React.useEffect(() => { window.addEventListener("pointermove", handlePointerMove, { passive: true }) window.addEventListener("pointerup", handlePointerUp, { passive: true }) return () => { window.removeEventListener("pointermove", handlePointerMove) window.removeEventListener("pointerup", handlePointerUp) } }, [handlePointerMove, handlePointerUp]) React.useEffect(() => { if (!(canvasRef.current && isInView)) { return } const canvas = canvasRef.current const logicalSize = bufferSize const dpr = Math.min( window.devicePixelRatio || 1, window.innerWidth < 640 ? 1.8 : 2 ) let baseColor: [number, number, number] let markerColor: [number, number, number] let arcColor: [number, number, number] let glowColor: [number, number, number] let dark: number let mapBrightness: number let opacity: number if (isDark) { const cardRgb = cssVarTriplet("--card") const mutedRgb = cssVarTriplet("--muted") baseColor = [ cardRgb[0] * 0.52 + 0.03, cardRgb[1] * 0.55 + 0.05, Math.min(0.96, cardRgb[2] * 0.6 + 0.1), ] markerColor = saturateRgb(cssVarTriplet("--chart-3"), 1.28) arcColor = saturateRgb(cssVarTriplet("--chart-4"), 1.18) glowColor = mutedRgb.map((c) => Math.min(1, c * 0.55)) as [ number, number, number, ] dark = 1 mapBrightness = 6.8 opacity = 0.88 } else { baseColor = demoConfig.baseColor markerColor = demoConfig.markerColor arcColor = demoConfig.arcColor glowColor = [0.94, 0.93, 0.91] dark = demoConfig.dark mapBrightness = demoConfig.mapBrightness opacity = 0.72 } const globe = createGlobe(canvas, { devicePixelRatio: dpr, width: logicalSize, height: logicalSize, phi: phiAutoRef.current + phiOffsetRef.current, theta: demoConfig.theta + thetaOffsetRef.current, dark, diffuse: 1.5, mapSamples: 16_000, mapBrightness, baseColor, markerColor, glowColor, scale: 1, offset: [0, 0], opacity, markers: cobeMarkers, arcs: cobeArcs, arcColor, arcWidth: 0.5, arcHeight: 0.25, markerElevation: demoConfig.markerElevation, } as never) as unknown as CobeGlobeHandle let raf = 0 const tick = () => { if (!isPausedRef.current) { if (!shouldReduceMotion) { phiAutoRef.current += 0.003 * speedRef.current } if ( Math.abs(velocity.current.phi) > 0.0001 || Math.abs(velocity.current.theta) > 0.0001 ) { phiOffsetRef.current += velocity.current.phi thetaOffsetRef.current += velocity.current.theta velocity.current.phi *= 0.95 velocity.current.theta *= 0.95 } const thetaMin = -0.4 const thetaMax = 0.4 if (thetaOffsetRef.current < thetaMin) { thetaOffsetRef.current += (thetaMin - thetaOffsetRef.current) * 0.1 } else if (thetaOffsetRef.current > thetaMax) { thetaOffsetRef.current += (thetaMax - thetaOffsetRef.current) * 0.1 } } globe.update({ phi: phiAutoRef.current + phiOffsetRef.current + dragOffset.current.phi, theta: demoConfig.theta + thetaOffsetRef.current + dragOffset.current.theta, width: logicalSize, height: logicalSize, markers: cobeMarkers, arcs: cobeArcs, }) raf = requestAnimationFrame(tick) } raf = requestAnimationFrame(tick) return () => { cancelAnimationFrame(raf) globe.destroy() } }, [isInView, cobeMarkers, cobeArcs, bufferSize, shouldReduceMotion, isDark]) return (

) } export default DefaultShowcaseGlobe 61:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cobe",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cobe","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cobe"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next-themes"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["globe"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/default/example/globe-demo.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]