feat: stars

src/components/stateless/ColorfulText/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { motion } from 'motion/react'
+
+const ColorfulText = ({ text }) => {
+  const colors = [
+    'rgb(131, 179, 32)',
+    'rgb(47, 195, 106)',
+    'rgb(42, 169, 210)',
+    'rgb(4, 112, 202)',
+    'rgb(107, 10, 255)',
+    'rgb(183, 0, 218)',
+    'rgb(218, 0, 171)',
+    'rgb(230, 64, 92)',
+    'rgb(232, 98, 63)',
+    'rgb(249, 129, 47)',
+  ]
+
+  const [currentColors, setCurrentColors] = React.useState(colors)
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      const shuffled = [...colors].sort(() => Math.random() - 0.5)
+      setCurrentColors(shuffled)
+      setCount((prev) => prev + 1)
+    }, 5000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return text.split('').map((char, index) => (
+    <motion.span
+      key={`${char}-${count}-${index}`}
+      initial={{
+        y: 0,
+      }}
+      animate={{
+        color: currentColors[index % currentColors.length],
+        y: [0, -3, 0],
+        scale: [1, 1.01, 1],
+        filter: ['blur(0px)', `blur(5px)`, 'blur(0px)'],
+        opacity: [1, 0.8, 1],
+      }}
+      transition={{
+        duration: 0.5,
+        delay: index * 0.05,
+      }}
+      className="inline-block font-sans tracking-tight"
+    >
+      {char}
+    </motion.span>
+  ))
+}
+
+export default ColorfulText

src/components/stateless/MemoizedStars/index.jsx

@@ -0,0 +1,43 @@
+import React, { memo } from 'react'
+import { motion } from 'motion/react'
+
+const Stars = () => {
+  const randomMove = () => Math.random() * 4 - 2
+  const randomOpacity = () => Math.random()
+  const random = () => Math.random()
+  return (
+    <div className="absolute inset-0">
+      {[...Array(80)].map((_, i) => (
+        <motion.span
+          key={`star-${i}`}
+          animate={{
+            top: `calc(${random() * 100}% + ${randomMove()}px)`,
+            left: `calc(${random() * 100}% + ${randomMove()}px)`,
+            opacity: randomOpacity(),
+            scale: [1, 1.2, 0],
+          }}
+          transition={{
+            duration: random() * 10 + 20,
+            repeat: Infinity,
+            ease: 'linear',
+          }}
+          style={{
+            position: 'absolute',
+            top: `${random() * 100}%`,
+            left: `${random() * 100}%`,
+            width: `2px`,
+            height: `2px`,
+            backgroundColor: 'white',
+            borderRadius: '50%',
+            zIndex: 1,
+          }}
+          className="inline-block"
+        ></motion.span>
+      ))}
+    </div>
+  )
+}
+
+const MemoizedStars = memo(Stars)
+
+export default MemoizedStars

src/pages/home/index.jsx

@@ -51,6 +51,8 @@ import TypeWriter from '@stateless/TypeWriter'
 import SlideText from '@stateless/SlideText'
 import SparklesCore from '@stateless/Sparkles'
 import SparklesText from '@stateless/SparklesText'
+import ColorfulText from '@stateless/ColorfulText'
+import MemoizedStars from '@stateless/MemoizedStars'
 
 import firstImage from '@assets/images/88-300x160.jpg'
 import secondImage from '@assets/images/2-300x160.jpg'
@@ -270,7 +272,7 @@ const Home = () => {
   return (
     <FixTabPanel ref={scrollRef}>
       <section className={styles.avatar} style={{ marginBottom: 15, fontSize: 24 }}>
-        React version: {version}
+        <ColorfulText text={`React version: ${version}`} />
       </section>
 
       <section style={{ marginBottom: 15, fontSize: 20 }}>
@@ -360,6 +362,19 @@ const Home = () => {
       >
         <BackgroundBoxes />
       </section>
+      <section
+        style={{
+          marginBottom: 15,
+          fontSize: 20,
+          height: 200,
+          width: 360,
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        className="bg-slate-900"
+      >
+        <MemoizedStars />
+      </section>
       <section
         onMouseEnter={handleMouseEnter}
         ref={mouseEnterRef}