{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stars-travel",
  "title": "Stars Travel",
  "author": "ratneshc <ratneshchipre@gmail.com>",
  "description": "A motion-driven SVG background with an animated 'infinite travel' effect.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/stars-travel/stars-travel.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion } from \"motion/react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nexport type StarsTravelProps = {\r\n  /** Children nodes to render within the StarsTravel component. */\r\n  children?: React.ReactNode;\r\n  /** Optional CSS class names for the container. */\r\n  className?: string;\r\n  /** SVG animation options. */\r\n  svgOptions?: {\r\n    /** Duration of the SVG animation in milliseconds. */\r\n    duration?: number;\r\n  };\r\n};\r\n\r\nexport function StarsTravel({\r\n  children,\r\n  className,\r\n  svgOptions,\r\n}: StarsTravelProps) {\r\n  return (\r\n    <div className={cn(\"relative w-full overflow-hidden\", className)}>\r\n      <SVG svgOptions={svgOptions} />\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nconst pathVariants = {\r\n  initial: { strokeDashoffset: 500, strokeDasharray: \"0 800\" },\r\n  animate: {\r\n    strokeDashoffset: 0,\r\n    strokeDasharray: \"20 800\",\r\n    opacity: [0, 2, 2, 0],\r\n  },\r\n};\r\n\r\nexport type SVGProps = {\r\n  /** SVG animation options. */\r\n  svgOptions?: {\r\n    /** Duration of the SVG animation in milliseconds. */\r\n    duration?: number;\r\n  };\r\n};\r\n\r\nconst SVG = ({ svgOptions }: SVGProps) => {\r\n  const paths = [\r\n    \"M720 450 L1431.52 -15.0078\",\r\n    \"M720 450 L1250.42 -214.196\",\r\n    \"M720 450 L258.602 -263.871\",\r\n    \"M720 450 L1567.23 381.48\",\r\n    \"M720 450 L-16.396 874.524\",\r\n    \"M720 450 L243.151 1153.64\",\r\n    \"M720 450 L1527.54 715.212\",\r\n    \"M720 450 L925.531 -374.777\",\r\n    \"M720 450 L822.905 1293.75\",\r\n    \"M720 450 L1125.77 1196.89\",\r\n    \"M720 450 L-77.4307 744.286\",\r\n    \"M720 450 L1307.21 1064.56\",\r\n    \"M720 450 L626.514 -394.844\",\r\n    \"M720 450 L1029.67 1241.58\",\r\n    \"M720 450 L-121.821 332.369\",\r\n    \"M720 450 L524.129 -377.124\",\r\n    \"M720 450 L472.792 -363.258\",\r\n    \"M720 450 L906.742 1279.23\",\r\n    \"M720 450 L-46.165 81.9082\",\r\n    \"M720 450 L512.156 1274.2\",\r\n    \"M720 450 L1368.98 -98.9326\",\r\n    \"M720 450 L1892.34 567.89\",\r\n    \"M720 450 L-234.56 -145.23\",\r\n    \"M720 450 L1654.78 -287.45\",\r\n    \"M720 450 L345.89 1087.34\",\r\n    \"M720 450 L-389.12 456.78\",\r\n    \"M720 450 L1745.23 123.56\",\r\n    \"M720 450 L189.45 -298.67\",\r\n    \"M720 450 L1123.67 -156.89\",\r\n    \"M720 450 L-178.34 1045.23\",\r\n    \"M720 450 L1456.78 892.34\",\r\n    \"M720 450 L567.89 -423.12\",\r\n  ];\r\n\r\n  return (\r\n    <motion.svg\r\n      viewBox=\"0 0 1440 900\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      preserveAspectRatio=\"none\"\r\n      initial={{ opacity: 0 }}\r\n      whileInView={{ opacity: 1 }}\r\n      viewport={{\r\n        once: false,\r\n        amount: 0.15,\r\n      }}\r\n      transition={{ duration: 1, delay: 0.1 }}\r\n      className=\"absolute inset-0 h-full w-full text-foreground\"\r\n    >\r\n      {paths.map((path, idx) => (\r\n        <motion.path\r\n          d={path}\r\n          stroke=\"currentColor\"\r\n          strokeWidth=\"1\"\r\n          strokeLinecap=\"round\"\r\n          variants={pathVariants}\r\n          initial=\"initial\"\r\n          animate=\"animate\"\r\n          transition={{\r\n            duration: svgOptions?.duration || 2,\r\n            ease: \"easeIn\",\r\n            repeat: Infinity,\r\n            repeatType: \"loop\",\r\n            delay: (idx * 0.15) % 3,\r\n            repeatDelay: 0,\r\n          }}\r\n          key={`path-first-${idx}`}\r\n        />\r\n      ))}\r\n    </motion.svg>\r\n  );\r\n};\r\n",
      "type": "registry:component"
    }
  ],
  "docs": "https://ratneshc.com/components/stars-travel",
  "type": "registry:component"
}