feat: star fall

Author: wkylin

src/components/stateless/Meteors/index.jsx

@@ -1,29 +1,72 @@
 import React from 'react'
-import clsx from 'clsx'
+import { motion } from 'framer-motion'
 
-import styles from './index.module.less'
+const Meteors = ({ starCount = 50, primaryColor = '#ffffff', className = '' }) => {
+  const stars = Array.from({ length: starCount }, (_, i) => {
+    const starTailLength = Math.random() * 2.5 + 5
+    const topOffset = Math.random() * 100
+    const fallDuration = Math.random() * 6 + 6
+    const fallDelay = Math.random() * 10
+
+    return {
+      id: i,
+      topOffset,
+      fallDuration,
+      fallDelay,
+    }
+  })
 
-const Meteors = ({ number, className }) => {
-  const meteors = new Array(number || 20).fill(true)
   return (
-    <>
-      {meteors.map((el, idx) => (
-        <span
-          key={'meteor' + idx}
-          className={clsx(
-            `${styles['animate-meteor-effect']} absolute top-1/2 left-1/2 h-0.5 w-0.5 rotate-[215deg] rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]`,
-            "before:absolute before:top-1/2 before:h-[1px] before:w-[50px] before:-translate-y-[50%] before:transform before:bg-linear-to-r before:from-[#64748b] before:to-transparent before:content-['']",
-            className
-          )}
+    <div
+      className={`pointer-events-none absolute inset-0 h-full w-full -rotate-45 ${className}`}
+      style={{
+        perspective: '1000px',
+        transformStyle: 'preserve-3d',
+      }}
+    >
+      {stars.map((star) => (
+        <motion.div
+          key={star.id}
+          className={`absolute h-[2px] rounded-full bg-gradient-to-r from-current to-transparent drop-shadow-[0_0_6px_currentColor]`}
           style={{
-            top: 0,
-            left: Math.floor(Math.random() * (400 - -400) + -400) + 'px',
-            animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + 's',
-            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + 's',
+            top: `${star.topOffset}vh`,
+            width: '6em',
+            color: primaryColor,
+            willChange: 'transform',
+          }}
+          initial={{ x: '104em' }}
+          animate={{ x: '-30em' }}
+          transition={{
+            duration: star.fallDuration,
+            delay: star.fallDelay,
+            repeat: Infinity,
+            ease: 'linear',
+            repeatType: 'loop',
           }}
-        ></span>
+        >
+          <div className="relative h-full w-full">
+            <div
+              className={`rounded-inherit animate-blink absolute top-0 left-[calc(-1em)] h-full w-[1em] bg-gradient-to-r from-transparent via-current to-transparent`}
+              style={{
+                willChange: 'transform, opacity',
+              }}
+            />
+            <div
+              className={`rounded-inherit animate-blink absolute top-0 left-[calc(-1em)] h-full w-[1em] rotate-45 bg-gradient-to-r from-transparent via-current to-transparent`}
+              style={{
+                willChange: 'transform, opacity',
+              }}
+            />
+            <div
+              className={`rounded-inherit animate-blink absolute top-0 left-[calc(-1em)] h-full w-[1em] -rotate-45 bg-gradient-to-r from-transparent via-current to-transparent`}
+              style={{
+                willChange: 'transform, opacity',
+              }}
+            />
+          </div>
+        </motion.div>
       ))}
-    </>
+    </div>
   )
 }
 

src/pages/home/index.jsx

@@ -400,7 +400,9 @@ const Home = () => {
           overflow: 'hidden',
         }}
       >
-        <Meteors number={40} />
+        <Meteors starCount={30} primaryColor="#6366f1" className="opacity-30" />
+        <Meteors starCount={25} primaryColor="#818cf8" className="opacity-50" />
+        <Meteors starCount={20} primaryColor="#ffffff" className="opacity-70" />
       </section>
       <section
         style={{