50: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T47fe,'use client'; import type React from 'react'; import { useEffect, useRef, useState, useCallback } from 'react'; import * as d3 from 'd3'; import { feature } from 'topojson-client'; import type { Topology, GeometryCollection, GeometryObject, } from 'topojson-specification'; import type { GeoPermissibleObjects } from 'd3'; interface GlobeWireframeProps { width?: number; height?: number; className?: string; strokeColor?: string; strokeWidth?: number; graticuleColor?: string; graticuleOpacity?: number; sphereOutlineColor?: string; sphereOutlineWidth?: number; autoRotate?: boolean; autoRotateSpeed?: number; rotateToLocation?: string | [number, number]; rotateCities?: string[]; rotationSpeed?: number; initialRotation?: [number, number]; enableInteraction?: boolean; showGraticule?: boolean; animationDuration?: number; startAsGlobe?: boolean; countryFillColor?: string; countryHoverColor?: string; variant?: 'wireframe' | 'wireframesolid' | 'solid'; scale?: number; backgroundColor?: string; } interface GeoFeature { type: string; geometry: GeometryObject; properties: Record; } interface WorldAtlasTopology extends Topology { objects: { countries: GeometryCollection; }; } interface CustomProjection extends d3.GeoProjection { alpha(value: number): CustomProjection; alpha(): number; } const cityCoordinates: Record = { 'san francisco': [37.7749, -122.4194], 'new york': [40.7128, -74.006], london: [51.5074, -0.1278], tokyo: [35.6762, 139.6503], paris: [48.8566, 2.3522], moscow: [55.7558, 37.6176], dubai: [25.2048, 55.2708], singapore: [1.3521, 103.8198], sydney: [-33.8688, 151.2093], mumbai: [19.076, 72.8777], 'los angeles': [34.0522, -118.2437], chicago: [41.8781, -87.6298], }; function orthographicRaw(x: number, y: number): [number, number] { const cosy = Math.cos(y); return [cosy * Math.sin(x), Math.sin(y)]; } function equirectangularRaw(lambda: number, phi: number): [number, number] { return [lambda, phi]; } function interpolateProjection( raw0: (lambda: number, phi: number) => [number, number], raw1: (lambda: number, phi: number) => [number, number], ): CustomProjection { let t = 0; const createRawProjection = ( alpha: number, ): ((lambda: number, phi: number) => [number, number]) => { return (lambda: number, phi: number): [number, number] => { const [x0, y0] = raw0(lambda, phi); const [x1, y1] = raw1(lambda, phi); return [x0 + alpha * (x1 - x0), y0 + alpha * (y1 - y0)]; }; }; const projection = d3.geoProjection( createRawProjection(t), ) as unknown as CustomProjection; const alphaMethod = ((value?: number): CustomProjection | number => { if (value !== undefined) { t = +value; const newProjection = d3.geoProjection( createRawProjection(t), ) as unknown as CustomProjection; if (projection.scale()) newProjection.scale(projection.scale()); if (projection.translate()) newProjection.translate(projection.translate()); if (projection.rotate()) newProjection.rotate(projection.rotate()); if (projection.precision()) newProjection.precision(projection.precision()); newProjection.alpha = alphaMethod as CustomProjection['alpha']; return newProjection; } return t; }) as CustomProjection['alpha']; projection.alpha = alphaMethod; return projection; } export default function GlobeWireframe({ width, height, className = 'aspect-square w-full max-w-150', strokeColor = 'currentColor', strokeWidth = 1.0, graticuleColor = 'currentColor', graticuleOpacity = 0.2, sphereOutlineColor = 'currentColor', sphereOutlineWidth = 1, autoRotate = true, autoRotateSpeed = 0.5, rotateToLocation, rotateCities = [], rotationSpeed = 3000, initialRotation = [0, 0], enableInteraction = true, showGraticule = true, animationDuration = 2000, startAsGlobe = true, countryFillColor, countryHoverColor, variant = 'wireframe', scale = 1, backgroundColor, }: GlobeWireframeProps) { const svgRef = useRef(null); const containerRef = useRef(null); const [isAnimating, setIsAnimating] = useState(false); const [progress, setProgress] = useState(startAsGlobe ? 0 : 100); const [worldData, setWorldData] = useState([]); const [rotation, setRotation] = useState<[number, number]>(initialRotation); const [isDragging, setIsDragging] = useState(false); const [lastMouse, setLastMouse] = useState([0, 0]); const [isVisible, setIsVisible] = useState(false); const rotationInterval = useRef(null); const rotationAnimFrame = useRef(null); const rotationStartTime = useRef(null); const rotationFrom = useRef<[number, number]>([0, 0]); const rotationTo = useRef<[number, number]>([0, 0]); const animationFrame = useRef(null); const [currentCityIndex, setCurrentCityIndex] = useState(0); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const resizeObserver = useRef(null); const rotationRef = useRef(rotation); useEffect(() => { rotationRef.current = rotation; }, [rotation]); const useResponsive = !width && !height; const finalWidth = useResponsive ? dimensions.width : width || 800; const finalHeight = useResponsive ? dimensions.height : height || 500; const defaultStrokeColor = strokeColor || 'currentColor'; const defaultGraticuleColor = graticuleColor || 'currentColor'; const defaultSphereOutlineColor = sphereOutlineColor || 'currentColor'; const defaultCountryFillColor = countryFillColor || (variant === 'solid' ? 'currentColor' : 'none'); const defaultBackgroundColor = backgroundColor || 'transparent'; useEffect(() => { if (!containerRef.current) return; const container = containerRef.current; const updateDimensions = () => { if (container && useResponsive) { const width = container.offsetWidth || 300; setDimensions({ width, height: width }); } }; updateDimensions(); if (useResponsive) { resizeObserver.current = new ResizeObserver(updateDimensions); resizeObserver.current.observe(container); } const observer = new IntersectionObserver( (entries) => { const [entry] = entries; setIsVisible(entry.isIntersecting); }, { threshold: 0.1 }, ); observer.observe(container); return () => { if (resizeObserver.current) { resizeObserver.current.disconnect(); } observer.unobserve(container); }; }, [useResponsive]); useEffect(() => { const loadWorldData = async () => { try { const response = await fetch( 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json', ); const world = (await response.json()) as WorldAtlasTopology; const countries = feature(world, world.objects.countries) .features as GeoFeature[]; setWorldData(countries); } catch (error) { console.error('Error loading world data:', error); const fallbackData: GeoFeature[] = [ { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ [-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90], ], ], } as unknown as GeometryObject, properties: {}, }, ]; setWorldData(fallbackData); } }; loadWorldData(); }, []); useEffect(() => { if (!autoRotate || !isVisible || isDragging || rotateCities.length > 0) { if (animationFrame.current) { cancelAnimationFrame(animationFrame.current); animationFrame.current = null; } return; } const rotate = () => { setRotation((prev) => [(prev[0] + autoRotateSpeed) % 360, prev[1]]); animationFrame.current = requestAnimationFrame(rotate); }; animationFrame.current = requestAnimationFrame(rotate); return () => { if (animationFrame.current) { cancelAnimationFrame(animationFrame.current); } }; }, [autoRotate, autoRotateSpeed, isVisible, isDragging, rotateCities.length]); const animateRotationTo = useCallback( (target: [number, number], duration = 1200) => { if (rotationAnimFrame.current) { cancelAnimationFrame(rotationAnimFrame.current); } rotationFrom.current = rotationRef.current; rotationTo.current = target; rotationStartTime.current = performance.now(); const animate = (time: number) => { const elapsed = time - (rotationStartTime.current || 0); const t = Math.min(elapsed / duration, 1); const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; const lon = rotationFrom.current[0] + (rotationTo.current[0] - rotationFrom.current[0]) * eased; const lat = rotationFrom.current[1] + (rotationTo.current[1] - rotationFrom.current[1]) * eased; setRotation([lon, lat]); if (t < 1) { rotationAnimFrame.current = requestAnimationFrame(animate); } }; rotationAnimFrame.current = requestAnimationFrame(animate); }, [], ); useEffect(() => { if (rotateCities.length === 0 || !isVisible) return; const rotateToNextCity = () => { const nextIndex = (currentCityIndex + 1) % rotateCities.length; const city = rotateCities[nextIndex].toLowerCase(); const coordinates = cityCoordinates[city]; if (coordinates) { animateRotationTo( [-coordinates[1], -coordinates[0]], rotationSpeed * 0.6, ); setCurrentCityIndex(nextIndex); } }; const city = rotateCities[currentCityIndex].toLowerCase(); const coordinates = cityCoordinates[city]; if (coordinates) { animateRotationTo( [-coordinates[1], -coordinates[0]], rotationSpeed * 0.6, ); } rotationInterval.current = setInterval(rotateToNextCity, rotationSpeed); return () => { if (rotationInterval.current) clearInterval(rotationInterval.current); }; }, [ rotateCities, currentCityIndex, rotationSpeed, isVisible, animateRotationTo, ]); useEffect(() => { if (!rotateToLocation) return; let coordinates: [number, number]; if (typeof rotateToLocation === 'string') { const city = rotateToLocation.toLowerCase(); coordinates = cityCoordinates[city] || [0, 0]; } else { coordinates = rotateToLocation; } setRotation([-coordinates[1], -coordinates[0]]); }, [rotateToLocation]); const handleMouseDown = (event: React.MouseEvent) => { if (!enableInteraction) return; setIsDragging(true); const rect = svgRef.current?.getBoundingClientRect(); if (rect) { setLastMouse([event.clientX - rect.left, event.clientY - rect.top]); } }; const handleMouseMove = (event: React.MouseEvent) => { if (!isDragging || !enableInteraction) return; const rect = svgRef.current?.getBoundingClientRect(); if (!rect) return; const currentMouse = [event.clientX - rect.left, event.clientY - rect.top]; const dx = currentMouse[0] - lastMouse[0]; const dy = currentMouse[1] - lastMouse[1]; const t = progress / 100; let sensitivity: number; if (variant === 'wireframe') { sensitivity = t < 0.5 ? 0.5 : 0.25; } else { sensitivity = 0.5; } setRotation((prev) => [ prev[0] + dx * sensitivity, Math.max(-90, Math.min(90, prev[1] - dy * sensitivity)), ]); setLastMouse(currentMouse); }; const handleMouseUp = () => { setIsDragging(false); }; const handleMouseLeave = () => { setIsDragging(false); }; useEffect(() => { if (!svgRef.current || worldData.length === 0 || !isVisible) return; if (useResponsive && dimensions.width === 0) return; const svg = d3.select(svgRef.current); svg.selectAll('*').remove(); let finalCountryFill = 'none'; let finalStrokeWidth = strokeWidth; let finalOpacity = 1.0; let renderGraticule = showGraticule; let finalGraticuleOpacity = graticuleOpacity; let finalSphereOutlineWidth = sphereOutlineWidth; if (variant === 'wireframe') { finalCountryFill = 'none'; finalStrokeWidth = strokeWidth; finalOpacity = 1.0; renderGraticule = showGraticule; finalGraticuleOpacity = graticuleOpacity; finalSphereOutlineWidth = sphereOutlineWidth; } else if (variant === 'wireframesolid') { finalCountryFill = 'none'; finalStrokeWidth = strokeWidth; finalOpacity = 1.0; renderGraticule = false; finalGraticuleOpacity = 0; finalSphereOutlineWidth = 1.5; } else if (variant === 'solid') { finalCountryFill = defaultCountryFillColor; finalStrokeWidth = strokeWidth * 0.5; finalOpacity = 0.3; renderGraticule = false; finalGraticuleOpacity = 0; finalSphereOutlineWidth = 1.5; } if (defaultBackgroundColor !== 'transparent') { const radius = (Math.min(finalWidth, finalHeight) / 2) * scale * 0.9; svg .append('circle') .attr('cx', finalWidth / 2) .attr('cy', finalHeight / 2) .attr('r', radius) .attr('fill', defaultBackgroundColor); } let projection: d3.GeoProjection | CustomProjection; const path = d3.geoPath(); if (variant === 'wireframe') { const t = progress / 100; const alpha = Math.pow(t, 0.5); const baseScale = Math.min(finalWidth, finalHeight) / 2; const scaleRange = d3 .scaleLinear() .domain([0, 1]) .range([baseScale * 0.9 * scale, baseScale * 0.54 * scale]); const baseRotate = d3.scaleLinear().domain([0, 1]).range([0, 0]); projection = interpolateProjection(orthographicRaw, equirectangularRaw) .scale(scaleRange(alpha)) .translate([finalWidth / 2, finalHeight / 2]) .rotate([baseRotate(alpha) + rotation[0], rotation[1]]) .precision(0.1); (projection as CustomProjection).alpha(alpha); path.projection(projection); } else { projection = d3 .geoOrthographic() .scale((Math.min(finalWidth, finalHeight) / 2) * scale * 0.9) .translate([finalWidth / 2, finalHeight / 2]) .rotate([rotation[0], rotation[1]]) .precision(0.1); path.projection(projection); } if (renderGraticule && finalGraticuleOpacity > 0) { try { const graticule = d3.geoGraticule(); const graticulePath = path(graticule()); if (graticulePath) { svg .append('path') .datum(graticule()) .attr('d', graticulePath) .attr('fill', 'none') .attr('stroke', defaultGraticuleColor) .attr('stroke-width', 1) .attr('opacity', finalGraticuleOpacity); } } catch (error) { console.error('Error creating graticule:', error); } } svg .selectAll('.country') .data(worldData) .enter() .append('path') .attr('class', 'country') .attr('d', (d: GeoFeature) => { try { const pathString = path(d as unknown as GeoPermissibleObjects); if (!pathString) return ''; if ( typeof pathString === 'string' && (pathString.includes('NaN') || pathString.includes('Infinity')) ) { return ''; } return pathString; } catch (error) { return ''; } }) .attr('fill', finalCountryFill) .attr('stroke', defaultStrokeColor) .attr('stroke-width', finalStrokeWidth) .attr('opacity', finalOpacity) // eslint-disable-next-line react-hooks/unsupported-syntax .style('visibility', function (this: SVGPathElement) { const pathData = d3.select(this).attr('d'); return pathData && pathData.length > 0 && !pathData.includes('NaN') ? 'visible' : 'hidden'; }) .on('mouseenter', function (this: SVGPathElement) { if (countryHoverColor && variant === 'solid') { d3.select(this).attr('fill', countryHoverColor); } }) .on('mouseleave', function (this: SVGPathElement) { if (variant === 'solid') { d3.select(this).attr('fill', finalCountryFill); } }); try { const sphereOutline = path({ type: 'Sphere' }); if (sphereOutline) { svg .append('path') .datum({ type: 'Sphere' }) .attr('d', sphereOutline) .attr('fill', 'none') .attr('stroke', defaultSphereOutlineColor) .attr('stroke-width', finalSphereOutlineWidth) .attr('opacity', variant === 'wireframe' ? 1.0 : 0.8); } } catch (error) { console.error('Error creating sphere outline:', error); } }, [ worldData, progress, rotation, isVisible, finalWidth, finalHeight, defaultStrokeColor, strokeWidth, defaultGraticuleColor, graticuleOpacity, defaultSphereOutlineColor, sphereOutlineWidth, showGraticule, defaultCountryFillColor, countryHoverColor, variant, scale, defaultBackgroundColor, useResponsive, dimensions.width, ]); return (

); } 4c:["$","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","d3",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/d3","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":"d3"}]]}]}],["$","li","topojson-client",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/topojson-client","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":"topojson-client"}]]}]}],["$","li","@types/d3",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Fd3","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":"@types/d3"}]]}]}],["$","li","@types/topojson-client",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Ftopojson-client","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":"@types/topojson-client"}]]}]}],["$","li","@types/topojson-specification",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Ftopojson-specification","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":"@types/topojson-specification"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/globe-wireframe.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/globe-wireframe","itemId":"@scrollxui/globe-wireframe"}],["$","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"}],["$","$L52",null,{"files":[{"path":"components/ui/globe-wireframe.tsx","content":"$53","type":"registry:ui"}]}]]}],"$L54"]}]

Globe Wireframe

Installation

Files

components

Styles