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:T1e4c,"use client"; import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import * as THREE from "three"; import { FloatingDots } from "@/components/ui/floating-dots"; import { cn } from "@/lib/utils"; type Position = number[]; type Ring = Position[]; type CountryGeometry = | { type: "Polygon"; coordinates: Ring[] } | { type: "MultiPolygon"; coordinates: Ring[][] }; type CountryCollection = { features?: { geometry?: CountryGeometry | null }[]; }; export type GlobeBackgroundProps = Omit, "children"> & { /** * URL of a countries GeoJSON FeatureCollection (Polygon/MultiPolygon features) used to draw borders. * You must host this file yourself, e.g. in `public/`. Get one from * https://github.com/nvkelso/natural-earth-vector (110m admin-0 countries) or any countries GeoJSON. * If it fails to load, the globe renders without borders. * @default "/countries-110m.geojson" */ geoJsonUrl?: string; /** Globe surface color (hex, rgb(), hsl() or a named color). @default "#182b4b" */ globeColor?: string; /** Country border color (hex, rgb(), hsl() or a named color). @default "#ffffff" */ lineColor?: string; /** Auto-rotation speed in radians per second. @default 0.15 */ rotationSpeed?: number; /** Let users drag to rotate the globe. Blocks touch scrolling over it, so it is off by default. @default false */ interactive?: boolean; /** Overlay drifting dots behind the globe. @default true */ showDots?: boolean; }; const GLOBE_RADIUS = 1; const BORDER_RADIUS = 1.005; // Initial orientation: India faces the viewer. const FOCUS_LON = THREE.MathUtils.degToRad(78.9629); const FOCUS_LAT = THREE.MathUtils.degToRad(20.5937); const MAX_FRAME_DELTA = 0.1; const reducedMotionQuery = "(prefers-reduced-motion: reduce)"; function subscribeReducedMotion(onChange: () => void) { const mql = window.matchMedia(reducedMotionQuery); mql.addEventListener("change", onChange); return () => mql.removeEventListener("change", onChange); } const getReducedMotion = () => window.matchMedia(reducedMotionQuery).matches; const getServerReducedMotion = () => false; /** Flattens every ring of every country into line-segment pairs on a sphere. */ function buildBorderPositions(collection: CountryCollection): Float32Array { const rings: Ring[] = []; for (const feature of collection.features ?? []) { const geometry = feature.geometry; if (geometry?.type === "Polygon") rings.push(...geometry.coordinates); else if (geometry?.type === "MultiPolygon") { for (const polygon of geometry.coordinates) rings.push(...polygon); } } let segments = 0; for (const ring of rings) segments += Math.max(ring.length - 1, 0); const positions = new Float32Array(segments * 6); const point = new THREE.Vector3(); let offset = 0; for (const ring of rings) { for (let i = 0; i < ring.length; i++) { const [lon, lat] = ring[i]; point.setFromSphericalCoords( BORDER_RADIUS, THREE.MathUtils.degToRad(90 - lat), THREE.MathUtils.degToRad(lon), ); // End of the previous segment, then start of the next one. if (i > 0) { point.toArray(positions, offset); offset += 3; } if (i < ring.length - 1) { point.toArray(positions, offset); offset += 3; } } } return positions; } function Globe({ borders, globeColor, lineColor, rotationSpeed, animate, }: { borders: Float32Array | null; globeColor: string; lineColor: string; rotationSpeed: number; animate: boolean; }) { const spinRef = useRef(null); useFrame((_, delta) => { if (!animate || !spinRef.current) return; spinRef.current.rotation.y += Math.min(delta, MAX_FRAME_DELTA) * rotationSpeed; }); return ( {borders && borders.length > 0 && ( )} ); } /** * A slowly rotating 3D globe with country borders over a dark backdrop. Fills its nearest positioned ancestor. * Country borders are loaded from `geoJsonUrl`, which you need to host yourself (see the prop docs). * Rendering pauses offscreen; auto-rotation stops when reduced motion is preferred. */ export function GlobeBackground({ geoJsonUrl = "/countries-110m.geojson", globeColor = "#182b4b", lineColor = "#ffffff", rotationSpeed = 0.15, interactive = false, showDots = true, className, ...props }: GlobeBackgroundProps) { const rootRef = useRef(null); const [visible, setVisible] = useState(true); const [countries, setCountries] = useState(null); const reducedMotion = useSyncExternalStore( subscribeReducedMotion, getReducedMotion, getServerReducedMotion, ); useEffect(() => { const root = rootRef.current; if (!root) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(root); return () => observer.disconnect(); }, []); useEffect(() => { const controller = new AbortController(); fetch(geoJsonUrl, { signal: controller.signal }) .then((response) => { if (!response.ok) throw new Error(`Failed to load ${geoJsonUrl}: ${response.status}`); return response.json() as Promise; }) .then(setCountries) .catch(() => { // Aborted or unavailable: render the globe without borders. if (!controller.signal.aborted) setCountries(null); }); return () => controller.abort(); }, [geoJsonUrl]); const borders = useMemo(() => (countries ? buildBorderPositions(countries) : null), [countries]); const animate = visible && !reducedMotion; return (

{showDots && }

); } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","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":"@react-three/drei"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","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":"@react-three/fiber"}]]}]}],["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","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":"three"}]]}]}]]}],["$","$L52",null,{"namespace":"@devsloka","registryDependencies":["https://ui.devsloka.in/r/floating-dots.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/backgrounds/3d-background.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]