{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-globe",
  "dependencies": [
    "cobe"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/globe.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport createGlobe from 'cobe';\nimport type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface EarthProps {\n  className?: string;\n  theta?: number;\n  dark?: number;\n  scale?: number;\n  diffuse?: number;\n  mapSamples?: number;\n  mapBrightness?: number;\n  baseColor?: [number, number, number];\n  markerColor?: [number, number, number];\n  glowColor?: [number, number, number];\n}\nconst Earth: React.FC<EarthProps> = ({\n  className,\n  theta = 0.25,\n  dark = 1,\n  scale = 1.1,\n  diffuse = 1.2,\n  mapSamples = 40000,\n  mapBrightness = 6,\n  baseColor = [0.4, 0.6509, 1],\n  markerColor = [1, 0, 0],\n  glowColor = [0.2745, 0.5765, 0.898],\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    let width = 0;\n    const onResize = () => canvasRef.current && (width = canvasRef.current.offsetWidth);\n    window.addEventListener('resize', onResize);\n    onResize();\n    let phi = 0;\n\n    onResize();\n    const globe = createGlobe(canvasRef.current!, {\n      devicePixelRatio: 2,\n      width: width * 2,\n      height: width * 2,\n      phi: 0,\n      theta: theta,\n      dark: dark,\n      scale: scale,\n      diffuse: diffuse,\n      mapSamples: mapSamples,\n      mapBrightness: mapBrightness,\n      baseColor: baseColor,\n      markerColor: markerColor,\n      glowColor: glowColor,\n      opacity: 1,\n      offset: [0, 0],\n      markers: [\n        // longitude latitude\n      ],\n      onRender: (state: Record<string, any>) => {\n        // Called on every animation frame.\n        // `state` will be an empty object, return updated params.\\\n        state.phi = phi;\n        phi += 0.003;\n      },\n    });\n\n    return () => {\n      globe.destroy();\n    };\n  }, []);\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center z-10 w-full max-w-[350px] mx-auto',\n        className\n      )}\n    >\n      <canvas\n        ref={canvasRef}\n        style={{\n          width: '100%',\n          height: '100%',\n          maxWidth: '100%',\n          aspectRatio: '1',\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Earth;\n",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/globe/card-globe-default.tsx",
      "content": "import Earth from '@/components/ui/globe';\nimport React from 'react';\n\nfunction GlobeDemo() {\n  return (\n    <div className='min-h-screen overflow-hidden bg-black text-white'>\n      <article className='max-w-[500px] mx-auto mt-12 p-5 text-center  border-neutral-900 border rounded-lg relative'>\n        <div className='absolute top-0 left-0 z-1 h-full w-full  bg-[radial-gradient(#5875d653_1px,#06080e_1px)] bg-size-[20px_20px]'></div>\n        <div className='relative z-10'>\n          <h1 className='text-7xl font-semibold bg-linear-to-b from-[#edeffd] to-[#06152e] bg-clip-text text-transparent leading-[100%] tracking-tighter'>\n            DESIGN A MASTERPIECE\n          </h1>\n          <Earth />\n        </div>\n      </article>\n    </div>\n  );\n}\n\nexport default GlobeDemo;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}