{
  "name": "bg-stars",
  "type": "registry:ui",
  "dependencies": [
    "motion-v"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/bg-stars/StarsBackground.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SpringOptions } from \"motion-v\";\nimport { cn } from \"@inspira-ui/plugins\";\nimport { motion, useMotionValue, useSpring } from \"motion-v\";\nimport { computed, onMounted, ref, watch } from \"vue\";\n\ninterface StarsBackgroundProps {\n  factor?: number;\n  speed?: number;\n  transition?: SpringOptions;\n  starColor?: string;\n  class?: string;\n}\n\nconst props = withDefaults(defineProps<StarsBackgroundProps>(), {\n  factor: 0.05,\n  speed: 50,\n  transition: () => ({ stiffness: 50, damping: 20 }),\n  starColor: \"#fff\",\n});\n\n// For slot content\ndefineSlots();\n\nfunction generateStars(count: number, starColor: string) {\n  const shadows: string[] = [];\n  for (let i = 0; i < count; i++) {\n    const x = Math.floor(Math.random() * 4000) - 2000;\n    const y = Math.floor(Math.random() * 4000) - 2000;\n    shadows.push(`${x}px ${y}px ${starColor}`);\n  }\n  return shadows.join(\", \");\n}\n\nconst offsetX = useMotionValue(1);\nconst offsetY = useMotionValue(1);\n\nconst springX = useSpring(offsetX, props.transition);\nconst springY = useSpring(offsetY, props.transition);\n\nfunction handleMouseMove(e: MouseEvent) {\n  const centerX = window.innerWidth / 2;\n  const centerY = window.innerHeight / 2;\n  const newOffsetX = -(e.clientX - centerX) * props.factor;\n  const newOffsetY = -(e.clientY - centerY) * props.factor;\n  offsetX.set(newOffsetX);\n  offsetY.set(newOffsetY);\n}\n\nconst boxShadow1 = ref(\"\");\nconst boxShadow2 = ref(\"\");\nconst boxShadow3 = ref(\"\");\n\nonMounted(() => {\n  boxShadow1.value = generateStars(1000, props.starColor);\n  boxShadow2.value = generateStars(400, props.starColor);\n  boxShadow3.value = generateStars(200, props.starColor);\n});\n\n// Watch for starColor changes\nwatch(\n  () => props.starColor,\n  (newColor) => {\n    boxShadow1.value = generateStars(1000, newColor);\n    boxShadow2.value = generateStars(400, newColor);\n    boxShadow3.value = generateStars(200, newColor);\n  },\n);\n\nconst starLayer1Transition = computed(() => ({\n  repeat: Infinity,\n  duration: props.speed,\n  ease: \"linear\",\n}));\n\nconst starLayer2Transition = computed(() => ({\n  repeat: Infinity,\n  duration: props.speed * 2,\n  ease: \"linear\",\n}));\n\nconst starLayer3Transition = computed(() => ({\n  repeat: Infinity,\n  duration: props.speed * 3,\n  ease: \"linear\",\n}));\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        `relative size-full overflow-hidden bg-[radial-gradient(ellipse_at_bottom,#262626_0%,#000_100%)]`,\n        props.class,\n      )\n    \"\n    @mousemove=\"handleMouseMove\"\n  >\n    <motion.div :style=\"{ x: springX, y: springY }\">\n      <!-- Star Layer 1 -->\n      <motion.div\n        class=\"absolute top-0 left-0 h-[2000px] w-full\"\n        :animate=\"{ y: [0, -2000] }\"\n        :transition=\"starLayer1Transition\"\n      >\n        <div\n          class=\"absolute rounded-full bg-transparent\"\n          :style=\"{\n            width: '1px',\n            height: '1px',\n            boxShadow: boxShadow1,\n          }\"\n        />\n        <div\n          class=\"absolute top-[2000px] rounded-full bg-transparent\"\n          :style=\"{\n            width: '1px',\n            height: '1px',\n            boxShadow: boxShadow1,\n          }\"\n        />\n      </motion.div>\n\n      <!-- Star Layer 2 -->\n      <motion.div\n        class=\"absolute top-0 left-0 h-[2000px] w-full\"\n        :animate=\"{ y: [0, -2000] }\"\n        :transition=\"starLayer2Transition\"\n      >\n        <div\n          class=\"absolute rounded-full bg-transparent\"\n          :style=\"{\n            width: '2px',\n            height: '2px',\n            boxShadow: boxShadow2,\n          }\"\n        />\n        <div\n          class=\"absolute top-[2000px] rounded-full bg-transparent\"\n          :style=\"{\n            width: '2px',\n            height: '2px',\n            boxShadow: boxShadow2,\n          }\"\n        />\n      </motion.div>\n\n      <!-- Star Layer 3 -->\n      <motion.div\n        class=\"absolute top-0 left-0 h-[2000px] w-full\"\n        :animate=\"{ y: [0, -2000] }\"\n        :transition=\"starLayer3Transition\"\n      >\n        <div\n          class=\"absolute rounded-full bg-transparent\"\n          :style=\"{\n            width: '3px',\n            height: '3px',\n            boxShadow: boxShadow3,\n          }\"\n        />\n        <div\n          class=\"absolute top-[2000px] rounded-full bg-transparent\"\n          :style=\"{\n            width: '3px',\n            height: '3px',\n            boxShadow: boxShadow3,\n          }\"\n        />\n      </motion.div>\n    </motion.div>\n\n    <!-- Slot for child content -->\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/bg-stars/index.ts",
      "content": "export { default as StarsBackground } from \"./StarsBackground.vue\";\n",
      "type": "registry:ui",
      "target": ""
    }
  ]
}