feat: meteors

src/components/stateless/Meteors/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import clsx from 'clsx'
+
+import styles from './index.module.less'
+
+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 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]`,
+            "before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent",
+            className
+          )}
+          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',
+          }}
+        ></span>
+      ))}
+    </>
+  )
+}
+
+export default Meteors

src/components/stateless/Meteors/index.module.less

@@ -0,0 +1,19 @@
+.animate-meteor-effect {
+  animation: meteor 5s linear infinite;
+}
+
+@keyframes meteor {
+  0% {
+    transform: rotate(215deg) translateX(0);
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotate(215deg) translateX(-500px);
+    opacity: 0;
+  }
+}

src/pages/home/index.jsx

@@ -40,6 +40,8 @@ import { ReactSignature } from '@stateless/ReactSignature'
 // import AdvancedCodeBlock from '@stateless/AdvancedCodeBlock'
 import ShinyText from '@stateless/ShinyText'
 import BlurText from '@stateless/BlurText'
+
+import Meteors from '@stateless/Meteors'
 import { oneApiChat, prettyObject, randomNum } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
 
@@ -224,7 +226,19 @@ const Home = () => {
       <section style={{ marginBottom: 15, fontSize: 20 }}>
         <BlurText text="Isn't this so cool?!" delay={50} />
       </section>
-
+      <section
+        style={{
+          marginBottom: 15,
+          fontSize: 20,
+          height: 200,
+          width: 360,
+          background: '#111827',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Meteors number={40} />
+      </section>
       <section className={styles.line}></section>
       <section>
         <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />