Stars Travel

1"use client";
2
3import { motion } from "motion/react";
4
5import { cn } from "@/lib/utils";
6
7export type StarsTravelProps = {
8  /** Children nodes to render within the StarsTravel component. */
9  children?: React.ReactNode;
10  /** Optional CSS class names for the container. */
11  className?: string;
12  /** SVG animation options. */
13  svgOptions?: {
14    /** Duration of the SVG animation in milliseconds. */
15    duration?: number;
16  };
17};
18
19export function StarsTravel({
20  children,
21  className,
22  svgOptions,
23}: StarsTravelProps) {
24  return (
25    <div className={cn("relative w-full overflow-hidden", className)}>
26      <SVG svgOptions={svgOptions} />
27      {children}
28    </div>
29  );
30}
31
32const pathVariants = {
33  initial: { strokeDashoffset: 500, strokeDasharray: "0 800" },
34  animate: {
35    strokeDashoffset: 0,
36    strokeDasharray: "20 800",
37    opacity: [0, 2, 2, 0],
38  },
39};
40
41export type SVGProps = {
42  /** SVG animation options. */
43  svgOptions?: {
44    /** Duration of the SVG animation in milliseconds. */
45    duration?: number;
46  };
47};
48
49const SVG = ({ svgOptions }: SVGProps) => {
50  const paths = [
51    "M720 450 L1431.52 -15.0078",
52    "M720 450 L1250.42 -214.196",
53    "M720 450 L258.602 -263.871",
54    "M720 450 L1567.23 381.48",
55    "M720 450 L-16.396 874.524",
56    "M720 450 L243.151 1153.64",
57    "M720 450 L1527.54 715.212",
58    "M720 450 L925.531 -374.777",
59    "M720 450 L822.905 1293.75",
60    "M720 450 L1125.77 1196.89",
61    "M720 450 L-77.4307 744.286",
62    "M720 450 L1307.21 1064.56",
63    "M720 450 L626.514 -394.844",
64    "M720 450 L1029.67 1241.58",
65    "M720 450 L-121.821 332.369",
66    "M720 450 L524.129 -377.124",
67    "M720 450 L472.792 -363.258",
68    "M720 450 L906.742 1279.23",
69    "M720 450 L-46.165 81.9082",
70    "M720 450 L512.156 1274.2",
71    "M720 450 L1368.98 -98.9326",
72    "M720 450 L1892.34 567.89",
73    "M720 450 L-234.56 -145.23",
74    "M720 450 L1654.78 -287.45",
75    "M720 450 L345.89 1087.34",
76    "M720 450 L-389.12 456.78",
77    "M720 450 L1745.23 123.56",
78    "M720 450 L189.45 -298.67",
79    "M720 450 L1123.67 -156.89",
80    "M720 450 L-178.34 1045.23",
81    "M720 450 L1456.78 892.34",
82    "M720 450 L567.89 -423.12",
83  ];
84
85  return (
86    <motion.svg
87      viewBox="0 0 1440 900"
88      fill="none"
89      xmlns="http://www.w3.org/2000/svg"
90      preserveAspectRatio="none"
91      initial={{ opacity: 0 }}
92      whileInView={{ opacity: 1 }}
93      viewport={{
94// … truncated