{
  "name": "cover",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.aceternity.com/registry/sparkles.json"
  ],
  "files": [
    {
      "path": "components/ui/cover.tsx",
      "content": "\"use client\";\nimport React, { useEffect, useId, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { SparklesCore } from \"@/components/ui/sparkles\";\n\nexport const Cover = ({\n  children,\n  className,\n}: {\n  children?: React.ReactNode;\n  className?: string;\n}) => {\n  const [hovered, setHovered] = useState(false);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [beamPositions, setBeamPositions] = useState<number[]>([]);\n\n  useEffect(() => {\n    if (ref.current) {\n      setContainerWidth(ref.current?.clientWidth ?? 0);\n\n      const height = ref.current?.clientHeight ?? 0;\n      const numberOfBeams = Math.floor(height / 10); // Adjust the divisor to control the spacing\n      const positions = Array.from(\n        { length: numberOfBeams },\n        (_, i) => (i + 1) * (height / (numberOfBeams + 1))\n      );\n      setBeamPositions(positions);\n    }\n  }, [ref.current]);\n\n  return (\n    <div\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      ref={ref}\n      className=\"relative hover:bg-neutral-900  group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-2 py-2  transition duration-200 rounded-sm\"\n    >\n      <AnimatePresence>\n        {hovered && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{\n              opacity: {\n                duration: 0.2,\n              },\n            }}\n            className=\"h-full w-full overflow-hidden absolute inset-0\"\n          >\n            <motion.div\n              animate={{\n                translateX: [\"-50%\", \"0%\"],\n              }}\n              transition={{\n                translateX: {\n                  duration: 10,\n                  ease: \"linear\",\n                  repeat: Infinity,\n                },\n              }}\n              className=\"w-[200%] h-full flex\"\n            >\n              <SparklesCore\n                background=\"transparent\"\n                minSize={0.4}\n                maxSize={1}\n                particleDensity={500}\n                className=\"w-full h-full\"\n                particleColor=\"#FFFFFF\"\n              />\n              <SparklesCore\n                background=\"transparent\"\n                minSize={0.4}\n                maxSize={1}\n                particleDensity={500}\n                className=\"w-full h-full\"\n                particleColor=\"#FFFFFF\"\n              />\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n      {beamPositions.map((position, index) => (\n        <Beam\n          key={index}\n          hovered={hovered}\n          duration={Math.random() * 2 + 1}\n          delay={Math.random() * 2 + 1}\n          width={containerWidth}\n          style={{\n            top: `${position}px`,\n          }}\n        />\n      ))}\n      <motion.span\n        key={String(hovered)}\n        animate={{\n          scale: hovered ? 0.8 : 1,\n          x: hovered ? [0, -30, 30, -30, 30, 0] : 0,\n          y: hovered ? [0, 30, -30, 30, -30, 0] : 0,\n        }}\n        exit={{\n          filter: \"none\",\n          scale: 1,\n          x: 0,\n          y: 0,\n        }}\n        transition={{\n          duration: 0.2,\n          x: {\n            duration: 0.2,\n            repeat: Infinity,\n            repeatType: \"loop\",\n          },\n          y: {\n            duration: 0.2,\n            repeat: Infinity,\n            repeatType: \"loop\",\n          },\n          scale: {\n            duration: 0.2,\n          },\n          filter: {\n            duration: 0.2,\n          },\n        }}\n        className={cn(\n          \"dark:text-white inline-block text-neutral-900 relative z-20 group-hover/cover:text-white transition duration-200\",\n          className\n        )}\n      >\n        {children}\n      </motion.span>\n      <CircleIcon className=\"absolute -right-[2px] -top-[2px]\" />\n      <CircleIcon className=\"absolute -bottom-[2px] -right-[2px]\" delay={0.4} />\n      <CircleIcon className=\"absolute -left-[2px] -top-[2px]\" delay={0.8} />\n      <CircleIcon className=\"absolute -bottom-[2px] -left-[2px]\" delay={1.6} />\n    </div>\n  );\n};\n\nexport const Beam = ({\n  className,\n  delay,\n  duration,\n  hovered,\n  width = 600,\n  ...svgProps\n}: {\n  className?: string;\n  delay?: number;\n  duration?: number;\n  hovered?: boolean;\n  width?: number;\n} & React.ComponentProps<typeof motion.svg>) => {\n  const id = useId();\n\n  return (\n    <motion.svg\n      width={width ?? \"600\"}\n      height=\"1\"\n      viewBox={`0 0 ${width ?? \"600\"} 1`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\"absolute inset-x-0 w-full\", className)}\n      {...svgProps}\n    >\n      <motion.path\n        d={`M0 0.5H${width ?? \"600\"}`}\n        stroke={`url(#svgGradient-${id})`}\n      />\n\n      <defs>\n        <motion.linearGradient\n          id={`svgGradient-${id}`}\n          key={String(hovered)}\n          gradientUnits=\"userSpaceOnUse\"\n          initial={{\n            x1: \"0%\",\n            x2: hovered ? \"-10%\" : \"-5%\",\n            y1: 0,\n            y2: 0,\n          }}\n          animate={{\n            x1: \"110%\",\n            x2: hovered ? \"100%\" : \"105%\",\n            y1: 0,\n            y2: 0,\n          }}\n          transition={{\n            duration: hovered ? 0.5 : duration ?? 2,\n            ease: \"linear\",\n            repeat: Infinity,\n            delay: hovered ? Math.random() * (1 - 0.2) + 0.2 : 0,\n            repeatDelay: hovered ? Math.random() * (2 - 1) + 1 : delay ?? 1,\n          }}\n        >\n          <stop stopColor=\"#2EB9DF\" stopOpacity=\"0\" />\n          <stop stopColor=\"#3b82f6\" />\n          <stop offset=\"1\" stopColor=\"#3b82f6\" stopOpacity=\"0\" />\n        </motion.linearGradient>\n      </defs>\n    </motion.svg>\n  );\n};\n\nexport const CircleIcon = ({\n  className,\n  delay,\n}: {\n  className?: string;\n  delay?: number;\n}) => {\n  return (\n    <div\n      className={cn(\n        `pointer-events-none animate-pulse group-hover/cover:hidden group-hover/cover:opacity-100 group h-2 w-2 rounded-full bg-neutral-600 dark:bg-white opacity-20 group-hover/cover:bg-white`,\n        className\n      )}\n    ></div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/cover.tsx"
    },
    {
      "path": "components/ui/sparkles.tsx",
      "content": "\"use client\";\nimport React, { useId, useMemo } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\nimport type { Container, SingleOrMultiple } from \"@tsparticles/engine\";\nimport { loadSlim } from \"@tsparticles/slim\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, useAnimation } from \"motion/react\";\n\ntype ParticlesProps = {\n  id?: string;\n  className?: string;\n  background?: string;\n  particleSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  speed?: number;\n  particleColor?: string;\n  particleDensity?: number;\n};\nexport const SparklesCore = (props: ParticlesProps) => {\n  const {\n    id,\n    className,\n    background,\n    minSize,\n    maxSize,\n    speed,\n    particleColor,\n    particleDensity,\n  } = props;\n  const [init, setInit] = useState(false);\n  useEffect(() => {\n    initParticlesEngine(async (engine) => {\n      await loadSlim(engine);\n    }).then(() => {\n      setInit(true);\n    });\n  }, []);\n  const controls = useAnimation();\n\n  const particlesLoaded = async (container?: Container) => {\n    if (container) {\n      controls.start({\n        opacity: 1,\n        transition: {\n          duration: 1,\n        },\n      });\n    }\n  };\n\n  const generatedId = useId();\n  return (\n    <motion.div animate={controls} className={cn(\"opacity-0\", className)}>\n      {init && (\n        <Particles\n          id={id || generatedId}\n          className={cn(\"h-full w-full\")}\n          particlesLoaded={particlesLoaded}\n          options={{\n            background: {\n              color: {\n                value: background || \"#0d47a1\",\n              },\n            },\n            fullScreen: {\n              enable: false,\n              zIndex: 1,\n            },\n\n            fpsLimit: 120,\n            interactivity: {\n              events: {\n                onClick: {\n                  enable: true,\n                  mode: \"push\",\n                },\n                onHover: {\n                  enable: false,\n                  mode: \"repulse\",\n                },\n                resize: true as any,\n              },\n              modes: {\n                push: {\n                  quantity: 4,\n                },\n                repulse: {\n                  distance: 200,\n                  duration: 0.4,\n                },\n              },\n            },\n            particles: {\n              bounce: {\n                horizontal: {\n                  value: 1,\n                },\n                vertical: {\n                  value: 1,\n                },\n              },\n              collisions: {\n                absorb: {\n                  speed: 2,\n                },\n                bounce: {\n                  horizontal: {\n                    value: 1,\n                  },\n                  vertical: {\n                    value: 1,\n                  },\n                },\n                enable: false,\n                maxSpeed: 50,\n                mode: \"bounce\",\n                overlap: {\n                  enable: true,\n                  retries: 0,\n                },\n              },\n              color: {\n                value: particleColor || \"#ffffff\",\n                animation: {\n                  h: {\n                    count: 0,\n                    enable: false,\n                    speed: 1,\n                    decay: 0,\n                    delay: 0,\n                    sync: true,\n                    offset: 0,\n                  },\n                  s: {\n                    count: 0,\n                    enable: false,\n                    speed: 1,\n                    decay: 0,\n                    delay: 0,\n                    sync: true,\n                    offset: 0,\n                  },\n                  l: {\n                    count: 0,\n                    enable: false,\n                    speed: 1,\n                    decay: 0,\n                    delay: 0,\n                    sync: true,\n                    offset: 0,\n                  },\n                },\n              },\n              effect: {\n                close: true,\n                fill: true,\n                options: {},\n                type: {} as SingleOrMultiple<string> | undefined,\n              },\n              groups: {},\n              move: {\n                angle: {\n                  offset: 0,\n                  value: 90,\n                },\n                attract: {\n                  distance: 200,\n                  enable: false,\n                  rotate: {\n                    x: 3000,\n                    y: 3000,\n                  },\n                },\n                center: {\n                  x: 50,\n                  y: 50,\n                  mode: \"percent\",\n                  radius: 0,\n                },\n                decay: 0,\n                distance: {},\n                direction: \"none\",\n                drift: 0,\n                enable: true,\n                gravity: {\n                  acceleration: 9.81,\n                  enable: false,\n                  inverse: false,\n                  maxSpeed: 50,\n                },\n                path: {\n                  clamp: true,\n                  delay: {\n                    value: 0,\n                  },\n                  enable: false,\n                  options: {},\n                },\n                outModes: {\n                  default: \"out\",\n                },\n                random: false,\n                size: false,\n                speed: {\n                  min: 0.1,\n                  max: 1,\n                },\n                spin: {\n                  acceleration: 0,\n                  enable: false,\n                },\n                straight: false,\n                trail: {\n                  enable: false,\n                  length: 10,\n                  fill: {},\n                },\n                vibrate: false,\n                warp: false,\n              },\n              number: {\n                density: {\n                  enable: true,\n                  width: 400,\n                  height: 400,\n                },\n                limit: {\n                  mode: \"delete\",\n                  value: 0,\n                },\n                value: particleDensity || 120,\n              },\n              opacity: {\n                value: {\n                  min: 0.1,\n                  max: 1,\n                },\n                animation: {\n                  count: 0,\n                  enable: true,\n                  speed: speed || 4,\n                  decay: 0,\n                  delay: 0,\n                  sync: false,\n                  mode: \"auto\",\n                  startValue: \"random\",\n                  destroy: \"none\",\n                },\n              },\n              reduceDuplicates: false,\n              shadow: {\n                blur: 0,\n                color: {\n                  value: \"#000\",\n                },\n                enable: false,\n                offset: {\n                  x: 0,\n                  y: 0,\n                },\n              },\n              shape: {\n                close: true,\n                fill: true,\n                options: {},\n                type: \"circle\",\n              },\n              size: {\n                value: {\n                  min: minSize || 1,\n                  max: maxSize || 3,\n                },\n                animation: {\n                  count: 0,\n                  enable: false,\n                  speed: 5,\n                  decay: 0,\n                  delay: 0,\n                  sync: false,\n                  mode: \"auto\",\n                  startValue: \"random\",\n                  destroy: \"none\",\n                },\n              },\n              stroke: {\n                width: 0,\n              },\n              zIndex: {\n                value: 0,\n                opacityRate: 1,\n                sizeRate: 1,\n                velocityRate: 1,\n              },\n              destroy: {\n                bounds: {},\n                mode: \"none\",\n                split: {\n                  count: 1,\n                  factor: {\n                    value: 3,\n                  },\n                  rate: {\n                    value: {\n                      min: 4,\n                      max: 9,\n                    },\n                  },\n                  sizeOffset: true,\n                },\n              },\n              roll: {\n                darken: {\n                  enable: false,\n                  value: 0,\n                },\n                enable: false,\n                enlighten: {\n                  enable: false,\n                  value: 0,\n                },\n                mode: \"vertical\",\n                speed: 25,\n              },\n              tilt: {\n                value: 0,\n                animation: {\n                  enable: false,\n                  speed: 0,\n                  decay: 0,\n                  sync: false,\n                },\n                direction: \"clockwise\",\n                enable: false,\n              },\n              twinkle: {\n                lines: {\n                  enable: false,\n                  frequency: 0.05,\n                  opacity: 1,\n                },\n                particles: {\n                  enable: false,\n                  frequency: 0.05,\n                  opacity: 1,\n                },\n              },\n              wobble: {\n                distance: 5,\n                enable: false,\n                speed: {\n                  angle: 50,\n                  move: 10,\n                },\n              },\n              life: {\n                count: 0,\n                delay: {\n                  value: 0,\n                  sync: false,\n                },\n                duration: {\n                  value: 0,\n                  sync: false,\n                },\n              },\n              rotate: {\n                value: 0,\n                animation: {\n                  enable: false,\n                  speed: 0,\n                  decay: 0,\n                  sync: false,\n                },\n                direction: \"clockwise\",\n                path: false,\n              },\n              orbit: {\n                animation: {\n                  count: 0,\n                  enable: false,\n                  speed: 1,\n                  decay: 0,\n                  delay: 0,\n                  sync: false,\n                },\n                enable: false,\n                opacity: 1,\n                rotation: {\n                  value: 45,\n                },\n                width: 1,\n              },\n              links: {\n                blink: false,\n                color: {\n                  value: \"#fff\",\n                },\n                consent: false,\n                distance: 100,\n                enable: false,\n                frequency: 1,\n                opacity: 1,\n                shadow: {\n                  blur: 5,\n                  color: {\n                    value: \"#000\",\n                  },\n                  enable: false,\n                },\n                triangles: {\n                  enable: false,\n                  frequency: 1,\n                },\n                width: 1,\n                warp: false,\n              },\n              repulse: {\n                value: 0,\n                enabled: false,\n                distance: 1,\n                duration: 1,\n                factor: 1,\n                speed: 1,\n              },\n            },\n            detectRetina: true,\n          }}\n        />\n      )}\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/sparkles.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Cover"
}