{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sparkles-globe",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/external/sparkles-globe.txt",
      "content": "import React from 'react';\r\nimport Earth from '@/components/globe';\r\nimport { Sparkles } from '@/components/sparkles';\r\n\r\nfunction index() {\r\n  return (\r\n    <>\r\n      <div className='h-screen overflow-hidden bg-black text-white'>\r\n        <article className='grid gap-4 text-center relative z-10 pt-10'>\r\n          <span className='inline-block text-sm border p-1 px-3 w-fit mx-auto rounded-full border-[#3273ff] bg-[#0f1c35]'>\r\n            Get Access\r\n          </span>\r\n          <h1 className='text-4xl  font-semibold bg-linear-to-b from-[#edeffd] to-[#7b9cda] bg-clip-text text-transparent leading-[100%] tracking-tighter'>\r\n            Design with a Global\r\n            <br />\r\n            Perspective, Innovate with Ease.\r\n          </h1>\r\n          <Earth />\r\n        </article>\r\n        <div className='relative -mt-32 h-80 w-screen overflow-hidden mask-[radial-gradient(50%_50%,white,transparent)] before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_bottom_center,#3273ff,transparent_90%)] before:opacity-40 after:absolute after:-left-1/2 after:top-1/2 after:aspect-[1/0.7] after:w-[200%] after:rounded-[10%] after:border-t after:border-[#163474] after:bg-[#08132b]'>\r\n          <Sparkles\r\n            density={800}\r\n            speed={1.2}\r\n            size={1.2}\r\n            direction='top'\r\n            opacitySpeed={2}\r\n            color='#32A7FF'\r\n            className='absolute inset-x-0 bottom-0 h-full w-full '\r\n          />\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default index;",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/external/sparkles.txt",
      "content": "'use client';\r\n\r\nimport { useEffect, useId, useState } from 'react';\r\nimport Particles, { initParticlesEngine } from '@tsparticles/react';\r\nimport { loadSlim } from '@tsparticles/slim';\r\n\r\ninterface SparklesProps {\r\n  className?: string;\r\n  size?: number;\r\n  minSize?: number | null;\r\n  density?: number;\r\n  speed?: number;\r\n  minSpeed?: number | null;\r\n  opacity?: number;\r\n  direction?: string;\r\n  opacitySpeed?: number;\r\n  minOpacity?: number | null;\r\n  color?: string;\r\n  mousemove?: boolean;\r\n  hover?: boolean;\r\n  background?: string;\r\n  options?: Record<string, any>; // Adjust type as needed based on `options` structure\r\n}\r\n\r\nexport function Sparkles({\r\n  className,\r\n  size = 1.2,\r\n  minSize = null,\r\n  density = 800,\r\n  speed = 1.5,\r\n  minSpeed = null,\r\n  opacity = 1,\r\n  direction = '',\r\n  opacitySpeed = 3,\r\n  minOpacity = null,\r\n  color = '#ffffff',\r\n  mousemove = false,\r\n  hover = false,\r\n  background = 'transparent',\r\n  options = {},\r\n}: SparklesProps) {\r\n  const [isReady, setIsReady] = useState(false);\r\n\r\n  useEffect(() => {\r\n    initParticlesEngine(async (engine) => {\r\n      await loadSlim(engine);\r\n    }).then(() => {\r\n      setIsReady(true);\r\n    });\r\n  }, []);\r\n\r\n  const id = useId();\r\n  const defaultOptions = {\r\n    background: {\r\n      color: {\r\n        value: background,\r\n      },\r\n    },\r\n    fullScreen: {\r\n      enable: false,\r\n      zIndex: 1,\r\n    },\r\n    fpsLimit: 300,\r\n\r\n    interactivity: {\r\n      events: {\r\n        onClick: {\r\n          enable: true,\r\n          mode: 'push',\r\n        },\r\n        onHover: {\r\n          enable: hover,\r\n          mode: 'grab',\r\n          parallax: {\r\n            enable: mousemove,\r\n            force: 60,\r\n            smooth: 10,\r\n          },\r\n        },\r\n        resize: true as any,\r\n      },\r\n      modes: {\r\n        push: {\r\n          quantity: 4,\r\n        },\r\n        repulse: {\r\n          distance: 200,\r\n          duration: 0.4,\r\n        },\r\n      },\r\n    },\r\n    particles: {\r\n      color: {\r\n        value: color,\r\n      },\r\n      move: {\r\n        enable: true,\r\n        direction,\r\n        speed: {\r\n          min: minSpeed || speed / 130,\r\n          max: speed,\r\n        },\r\n        straight: true,\r\n      },\r\n      collisions: {\r\n        absorb: {\r\n          speed: 2,\r\n        },\r\n        bounce: {\r\n          horizontal: {\r\n            value: 1,\r\n          },\r\n          vertical: {\r\n            value: 1,\r\n          },\r\n        },\r\n        enable: false,\r\n        maxSpeed: 50,\r\n        mode: 'bounce',\r\n        overlap: {\r\n          enable: true,\r\n          retries: 0,\r\n        },\r\n      },\r\n      number: {\r\n        value: density,\r\n      },\r\n      opacity: {\r\n        value: {\r\n          min: minOpacity || opacity / 10,\r\n          max: opacity,\r\n        },\r\n        animation: {\r\n          enable: true,\r\n          sync: false,\r\n          speed: opacitySpeed,\r\n        },\r\n      },\r\n      size: {\r\n        value: {\r\n          min: minSize || size / 1.5,\r\n          max: size,\r\n        },\r\n      },\r\n    },\r\n    detectRetina: true,\r\n  };\r\n  return (\r\n    isReady && (\r\n      <Particles id={id} \r\n      // @ts-nocheck\r\n      options={defaultOptions} className={className} />\r\n    )\r\n  );\r\n}",
      "type": "registry:component"
    },
    {
      "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"
    }
  ],
  "type": "registry:component"
}