4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T4fc3,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { useReducedMotion } from "motion/react"; import * as THREE from "three"; export type NetworkGlobeNode = { id: string; label: string; latitude: number; longitude: number; value?: string; color?: string; }; export type NetworkGlobeProps = { nodes: readonly NetworkGlobeNode[]; label?: string; interactiveHint?: string; staticHint?: string; activateLabel?: string; liveLabel?: string; staticLabel?: string; onlineLabel?: string; emptyLabel?: string; activation?: "intent" | "auto"; className?: string; onFocusNode?: (node: NetworkGlobeNode) => void; }; type GlobeRuntime = { renderer: THREE.WebGLRenderer; scene: THREE.Scene; camera: THREE.PerspectiveCamera; globe: THREE.Group; nodeMeshes: Map>; arcMaterials: Map; }; const FRAME_INTERVAL_MS = 1000 / 30; const AUTO_ROTATE_DURATION_MS = 2400; const yieldToMain = () => new Promise((resolve) => window.setTimeout(resolve, 0)); async function precompileMaterialStages( renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, cancelled: () => boolean, ) { const renderables: Array<{ object: THREE.Object3D; visible: boolean; materialTypes: readonly string[] }> = []; scene.traverse((object) => { const material = "material" in object ? (object as THREE.Mesh).material : undefined; if (!material) return; const materials = Array.isArray(material) ? material : [material]; renderables.push({ object, visible: object.visible, materialTypes: materials.map((entry) => entry.type), }); }); const materialTypes = [...new Set(renderables.flatMap((entry) => entry.materialTypes))]; for (const materialType of materialTypes) { await yieldToMain(); if (cancelled()) return; for (const entry of renderables) { entry.object.visible = entry.visible && entry.materialTypes.includes(materialType); } renderer.compile(scene, camera); } for (const entry of renderables) entry.object.visible = entry.visible; } function applyFocusStyles(runtime: GlobeRuntime, focusedId: string | undefined) { runtime.nodeMeshes.forEach((mesh, id) => { const selected = id === focusedId; mesh.scale.setScalar(selected ? 1.42 : 1); mesh.material.opacity = selected ? 1 : 0.72; }); runtime.arcMaterials.forEach((material, id) => { material.opacity = id === focusedId ? 0.92 : 0.24; }); } function pointOnGlobe(latitude: number, longitude: number, radius: number) { const phi = THREE.MathUtils.degToRad(90 - latitude); const theta = THREE.MathUtils.degToRad(longitude + 180); return new THREE.Vector3( -(radius * Math.sin(phi) * Math.cos(theta)), radius * Math.cos(phi), radius * Math.sin(phi) * Math.sin(theta), ); } function arcBetween(start: THREE.Vector3, end: THREE.Vector3) { const distance = start.distanceTo(end); const middle = start .clone() .add(end) .multiplyScalar(0.5) .normalize() .multiplyScalar(1.64 + distance * 0.24); return new THREE.QuadraticBezierCurve3(start, middle, end).getPoints(42); } export function NetworkGlobe({ nodes, label = "Global network", interactiveHint = "Drag or use arrow keys to rotate.", staticHint = "Static network preview.", activateLabel = "Explore 3D", liveLabel = "Live network", staticLabel = "Static network", onlineLabel = "Online", emptyLabel = "No network nodes available.", activation = "intent", className = "", onFocusNode, }: NetworkGlobeProps) { const mountRef = useRef(null); const runtimeRef = useRef(null); const frameRef = useRef(null); const lastFrameTimeRef = useRef(0); const autoRotateUntilRef = useRef(0); const requestFrameRef = useRef<() => void>(() => undefined); const focusAfterActivationRef = useRef(false); const visibleRef = useRef(true); const rotationRef = useRef({ y: -0.42, targetY: -0.42, dragging: false, pointerId: -1, x: 0 }); const sceneNodesRef = useRef(nodes); sceneNodesRef.current = nodes; const reduced = useReducedMotion() === true; const reducedRef = useRef(reduced); reducedRef.current = reduced; const [activationRequested, setActivationRequested] = useState(activation === "auto"); const firstId = nodes[0]?.id ?? ""; const [focusedId, setFocusedId] = useState(firstId); const [rendererReady, setRendererReady] = useState(false); const sceneSignature = JSON.stringify( nodes.map(({ id, latitude, longitude, color }) => [id, latitude, longitude, color]), ); const effectiveFocusedId = nodes.some((node) => node.id === focusedId) ? focusedId : firstId; const effectiveFocusedIdRef = useRef(effectiveFocusedId); effectiveFocusedIdRef.current = effectiveFocusedId; const focused = useMemo( () => nodes.find((node) => node.id === effectiveFocusedId), [effectiveFocusedId, nodes], ); useEffect(() => { if (focusedId !== effectiveFocusedId) setFocusedId(effectiveFocusedId); }, [effectiveFocusedId, focusedId]); useEffect(() => { if (activation === "auto") setActivationRequested(true); }, [activation]); const draw = () => { const runtime = runtimeRef.current; if (runtime) runtime.renderer.render(runtime.scene, runtime.camera); }; const animate = (timestamp: number) => { frameRef.current = null; const runtime = runtimeRef.current; if (!runtime || !visibleRef.current) return; const elapsed = lastFrameTimeRef.current > 0 ? timestamp - lastFrameTimeRef.current : FRAME_INTERVAL_MS; if (lastFrameTimeRef.current > 0 && elapsed < FRAME_INTERVAL_MS) { frameRef.current = requestAnimationFrame(animate); return; } lastFrameTimeRef.current = timestamp; const rotation = rotationRef.current; if (!reducedRef.current) { const autoRotating = !rotation.dragging && timestamp < autoRotateUntilRef.current; if (autoRotating) rotation.targetY += 0.0011 * Math.min(2, Math.max(1, elapsed / 16.67)); rotation.y += (rotation.targetY - rotation.y) * 0.14; runtime.globe.rotation.y = rotation.y; draw(); const moving = rotation.dragging || autoRotating || Math.abs(rotation.targetY - rotation.y) > 0.0005; if (moving) frameRef.current = requestAnimationFrame(animate); } else { runtime.globe.rotation.y = rotation.targetY; draw(); } }; const requestFrame = () => { if (frameRef.current === null && visibleRef.current) { frameRef.current = requestAnimationFrame(animate); } }; requestFrameRef.current = requestFrame; useEffect(() => { if (!activationRequested) return; const mount = mountRef.current; const sceneNodes = sceneNodesRef.current; if (!mount || sceneNodes.length === 0) { setRendererReady(false); return; } let cancelled = false; const resources = new Set<{ dispose: () => void }>(); const track = void }>(resource: T) => { resources.add(resource); return resource; }; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 100); camera.position.set(0, 0.12, 5.15); let renderer: THREE.WebGLRenderer; try { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false, powerPreference: "high-performance" }); } catch { setRendererReady(false); if (activation === "intent") setActivationRequested(false); return; } renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.setClearColor(0x000000, 0); renderer.domElement.setAttribute("aria-hidden", "true"); renderer.domElement.style.width = "100%"; renderer.domElement.style.height = "100%"; renderer.domElement.style.display = "block"; mount.prepend(renderer.domElement); const onContextLost = (event: Event) => { event.preventDefault(); const rotation = rotationRef.current; if (rotation.pointerId >= 0 && mount.hasPointerCapture(rotation.pointerId)) { mount.releasePointerCapture(rotation.pointerId); } rotation.dragging = false; rotation.pointerId = -1; if (frameRef.current !== null) cancelAnimationFrame(frameRef.current); frameRef.current = null; setRendererReady(false); }; const onContextRestored = () => { setRendererReady(true); requestFrameRef.current(); }; renderer.domElement.addEventListener("webglcontextlost", onContextLost); renderer.domElement.addEventListener("webglcontextrestored", onContextRestored); const globe = new THREE.Group(); globe.rotation.set(-0.12, rotationRef.current.y, 0.02); scene.add(globe); const sphereGeometry = track(new THREE.SphereGeometry(1.55, 28, 20)); const sphereMaterial = track( new THREE.MeshBasicMaterial({ color: 0x80b4c7, wireframe: true, transparent: true, opacity: 0.26, }), ); globe.add(new THREE.Mesh(sphereGeometry, sphereMaterial)); const innerGeometry = track(new THREE.SphereGeometry(1.515, 40, 28)); const innerMaterial = track( new THREE.MeshBasicMaterial({ color: 0x0e1a21, transparent: true, opacity: 0.9, }), ); globe.add(new THREE.Mesh(innerGeometry, innerMaterial)); const nodeMeshes = new Map>(); const arcMaterials = new Map(); const hub = pointOnGlobe(sceneNodes[0].latitude, sceneNodes[0].longitude, 1.58); sceneNodes.forEach((node, index) => { const geometry = track(new THREE.SphereGeometry(index === 0 ? 0.075 : 0.055, 18, 12)); const material = track( new THREE.MeshBasicMaterial({ color: node.color ?? (index === 0 ? "#ffb05e" : "#76d0db"), transparent: true, opacity: 0.72, }), ); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(pointOnGlobe(node.latitude, node.longitude, 1.59)); globe.add(mesh); nodeMeshes.set(node.id, mesh); if (index > 0) { const arcGeometry = track( new THREE.BufferGeometry().setFromPoints( arcBetween(hub, pointOnGlobe(node.latitude, node.longitude, 1.58)), ), ); const arcMaterial = track( new THREE.LineBasicMaterial({ color: node.color ?? "#76d0db", transparent: true, opacity: 0.4, }), ); globe.add(new THREE.Line(arcGeometry, arcMaterial)); arcMaterials.set(node.id, arcMaterial); } }); const runtime = { renderer, scene, camera, globe, nodeMeshes, arcMaterials }; applyFocusStyles(runtime, effectiveFocusedIdRef.current || undefined); runtimeRef.current = runtime; const resize = new ResizeObserver(([entry]) => { const width = Math.max(1, entry.contentRect.width); const height = Math.max(1, entry.contentRect.height); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.6)); renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); requestFrameRef.current(); }); resize.observe(mount); let intersecting = true; const intersection = new IntersectionObserver(([entry]) => { intersecting = entry.isIntersecting; visibleRef.current = intersecting && !document.hidden; if (visibleRef.current) requestFrameRef.current(); else if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); frameRef.current = null; } }); const onVisibility = () => { visibleRef.current = intersecting && !document.hidden; if (visibleRef.current) requestFrameRef.current(); else if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); frameRef.current = null; } }; intersection.observe(mount); document.addEventListener("visibilitychange", onVisibility); void precompileMaterialStages(renderer, scene, camera, () => cancelled).then(() => { if (cancelled) return; lastFrameTimeRef.current = 0; autoRotateUntilRef.current = performance.now() + AUTO_ROTATE_DURATION_MS; setRendererReady(true); requestFrameRef.current(); }); return () => { cancelled = true; renderer.domElement.removeEventListener("webglcontextlost", onContextLost); renderer.domElement.removeEventListener("webglcontextrestored", onContextRestored); resize.disconnect(); intersection.disconnect(); document.removeEventListener("visibilitychange", onVisibility); if (frameRef.current !== null) cancelAnimationFrame(frameRef.current); resources.forEach((resource) => resource.dispose()); renderer.dispose(); renderer.forceContextLoss(); renderer.domElement.remove(); runtimeRef.current = null; frameRef.current = null; lastFrameTimeRef.current = 0; }; }, [activation, activationRequested, sceneSignature]); useEffect(() => { const runtime = runtimeRef.current; if (!runtime) return; applyFocusStyles(runtime, focused?.id); requestFrameRef.current(); }, [focused?.id]); useEffect(() => { requestFrameRef.current(); }, [reduced]); useEffect(() => { if (!rendererReady || !focusAfterActivationRef.current) return; focusAfterActivationRef.current = false; mountRef.current?.focus({ preventScroll: true }); }, [rendererReady]); const focusNode = (node: NetworkGlobeNode) => { setFocusedId(node.id); onFocusNode?.(node); }; return (

{ if (!rendererReady || !(event.target instanceof HTMLCanvasElement)) return; const rotation = rotationRef.current; autoRotateUntilRef.current = 0; rotation.dragging = true; rotation.pointerId = event.pointerId; rotation.x = event.clientX; event.currentTarget.setPointerCapture(event.pointerId); event.currentTarget.focus({ preventScroll: true }); }} onPointerMove={(event) => { if (!rendererReady) return; const rotation = rotationRef.current; if (!rotation.dragging || rotation.pointerId !== event.pointerId) return; rotation.targetY += (event.clientX - rotation.x) * 0.007; rotation.x = event.clientX; requestFrame(); }} onPointerUp={(event) => { if (!rendererReady) return; const rotation = rotationRef.current; if (rotation.pointerId !== event.pointerId) return; rotation.dragging = false; rotation.pointerId = -1; event.currentTarget.releasePointerCapture?.(event.pointerId); }} onPointerCancel={() => { if (!rendererReady) return; rotationRef.current.dragging = false; rotationRef.current.pointerId = -1; }} onLostPointerCapture={(event) => { const rotation = rotationRef.current; if (rotation.pointerId !== event.pointerId) return; rotation.dragging = false; rotation.pointerId = -1; }} onKeyDown={ rendererReady ? (event) => { if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return; autoRotateUntilRef.current = 0; rotationRef.current.targetY += event.key === "ArrowLeft" ? -0.16 : 0.16; event.preventDefault(); requestFrame(); } : undefined } className={`relative isolate min-h-[250px] w-full overflow-hidden rounded-[18px] border border-[#8ec8d4]/25 bg-[#081216] outline-none focus-visible:ring-2 focus-visible:ring-[#8ec8d4] focus-visible:ring-offset-2 focus-visible:ring-offset-[#081216] ${rendererReady ? "touch-none" : "touch-pan-y"} ${className}`} >

{nodes.slice(0, 6).map((node, index) => ( ))}

{!rendererReady && activation === "intent" && nodes.length > 0 ? ( ) : null} {nodes.length === 0 ? (

{emptyLabel}

) : null}

{rendererReady ? liveLabel : staticLabel} {label} {focused ? {focused?.value ?? onlineLabel} {focused.label} : null}

{nodes.length > 0 ?

{nodes.map((node) => { const selected = node.id === focused?.id; return ( ); })}

: null}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}],["$","li","three",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"three"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/network-globe.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/network-globe","itemId":"@motion-lexicon/network-globe"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/network-globe.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/network-globe.tsx"}]}]]}],"$L53"]}]

Network Globe

Installation

Files

components

Styles