perf(options): add meteors effect

src/app/options/App.tsx

@@ -2,10 +2,12 @@ import { Toaster } from 'sonner'
 import Main from './components/Main'
 import ProfileForm from './components/ProfileForm'
 import BadgeList from './components/BadgeList'
+import Meteors from '@/components/magicui/meteors'
 
 function App() {
   return (
     <>
+      <Meteors number={30} />
       <BadgeList></BadgeList>
       <Main>
         <ProfileForm></ProfileForm>

src/components/magicui/meteors.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/utils/index";
+
+interface MeteorsProps {
+  number?: number;
+}
+export const Meteors = ({ number = 20 }: MeteorsProps) => {
+  const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(
+    [],
+  );
+
+  useEffect(() => {
+    const styles = [...new Array(number)].map(() => ({
+      top: -5,
+      left: Math.floor(Math.random() * window.innerWidth) + "px",
+      animationDelay: Math.random() * 1 + 0.2 + "s",
+      animationDuration: Math.floor(Math.random() * 8 + 2) + "s",
+    }));
+    setMeteorStyles(styles);
+  }, [number]);
+
+  return (
+    <>
+      {[...meteorStyles].map((style, idx) => (
+        // Meteor Head
+        <span
+          key={idx}
+          className={cn(
+            "pointer-events-none absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] animate-meteor rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]",
+          )}
+          style={style}
+        >
+          {/* Meteor Tail */}
+          <div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" />
+        </span>
+      ))}
+    </>
+  );
+};
+
+export default Meteors;

tailwind.config.ts

@@ -73,12 +73,21 @@ export default {
         pulse: {
           '0%, 100%': { boxShadow: '0 0 0 0 var(--pulse-color)' },
           '50%': { boxShadow: '0 0 0 8px var(--pulse-color)' }
+        },
+        meteor: {
+          '0%': { transform: 'rotate(215deg) translateX(0)', opacity: '1' },
+          '70%': { opacity: '1' },
+          '100%': {
+            transform: 'rotate(215deg) translateX(-500px)',
+            opacity: '0'
+          }
         }
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
-        pulse: 'pulse var(--duration) ease-out infinite'
+        pulse: 'pulse var(--duration) ease-out infinite',
+        meteor: 'meteor 5s linear infinite'
       }
     }
   },