feat: type loop

package.json

@@ -268,6 +268,7 @@
     "react": "^18.3.1",
     "react-barcode": "^1.5.3",
     "react-canvas-confetti": "^2.0.7",
+    "react-countup": "^6.5.3",
     "react-css-theme-switcher": "^0.3.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
@@ -305,6 +306,7 @@
     "styled-components": "^6.1.13",
     "three": "^0.170.0",
     "typescript": "^5.7.2",
+    "typewriter-effect": "^2.21.0",
     "use-debounce": "^10.0.4",
     "use-deep-compare-effect": "^1.8.1",
     "use-react-router-breadcrumbs": "^4.0.1",

src/components/stateless/Spotlight/index.jsx

@@ -0,0 +1,67 @@
+import React, { useRef, useState, useEffect } from "react"
+import useMousePosition from "@hooks/useMousePosition"
+
+export default function Spotlight({children, className = "",}) {
+  const containerRef = useRef(null);
+  const mousePosition = useMousePosition();
+  const mouse = useRef({ x: 0, y: 0 });
+  const containerSize = useRef({ w: 0, h: 0 });
+  const [boxes, setBoxes] = useState([]);
+
+  useEffect(() => {
+    containerRef.current &&
+      setBoxes(
+        Array.from(containerRef.current.children).map(
+          (el) => el,
+        ),
+      );
+  }, []);
+
+  useEffect(() => {
+    initContainer();
+    window.addEventListener("resize", initContainer);
+
+    return () => {
+      window.removeEventListener("resize", initContainer);
+    };
+  }, [boxes]);
+
+  useEffect(() => {
+    onMouseMove();
+  }, [mousePosition]);
+
+  const initContainer = () => {
+    if (containerRef.current) {
+      containerSize.current.w = containerRef.current.offsetWidth;
+      containerSize.current.h = containerRef.current.offsetHeight;
+    }
+  };
+
+  const onMouseMove = () => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const { w, h } = containerSize.current;
+      const x = mousePosition.x - rect.left;
+      const y = mousePosition.y - rect.top;
+      const inside = x < w && x > 0 && y < h && y > 0;
+      if (inside) {
+        mouse.current.x = x;
+        mouse.current.y = y;
+        boxes.forEach((box) => {
+          const boxX =
+            -(box.getBoundingClientRect().left - rect.left) + mouse.current.x;
+          const boxY =
+            -(box.getBoundingClientRect().top - rect.top) + mouse.current.y;
+          box.style.setProperty("--mouse-x", `${boxX}px`);
+          box.style.setProperty("--mouse-y", `${boxY}px`);
+        });
+      }
+    }
+  };
+
+  return (
+    <div className={className} ref={containerRef}>
+      {children}
+    </div>
+  );
+}

src/pages/home/index.jsx

@@ -2,7 +2,10 @@ import React, { version, useState, useRef } from 'react'
 import { Input, Flex, Button } from 'antd'
 import { SendOutlined } from '@ant-design/icons'
 import { Atom, Merge, GitMerge, GitPullRequestArrow } from 'lucide-react'
+import CountUp from 'react-countup'
 import { PinInput } from 'react-input-pin-code'
+import Spotlight from '@stateless/Spotlight'
+import Typewriter from 'typewriter-effect'
 import FixTabPanel from '@stateless/FixTabPanel'
 import TypedText from '@stateless/TypedText'
 import ReMarkdown from '@stateless/ReMarkdown'
@@ -187,6 +190,20 @@ const Home = () => {
           <LazyLoadImage src="https://picsum.photos/seed/picsum/300/160" alt="Strawberries" />
         </ScrollAnimation>
       </section>
+      <section style={{ marginBottom: 40, fontSize: 36 }}>
+        <Typewriter
+          options={{
+            strings: [
+              "Software Developer.",
+              "Full Stack Developer.",
+              "Open Source Contributor.",
+            ],
+            autoStart: true,
+            loop: true,
+            deleteSpeed: 50,
+          }}
+        />
+      </section>
       <section>
         <GradientTracking />
       </section>
@@ -225,6 +242,12 @@ const Home = () => {
           </>
         </AnimateOnScreen.ScaleIn>
       </section>
+      {/* <section style={{ marginBottom: 40, width: 360, height: 200 }}>
+        <Spotlight className="w-full h-full">
+          <div className="relative w-full h-full overflow-hidden rounded-2xl bg-gray-800 p-px before:pointer-events-none before:absolute before:-left-40 before:-top-40 before:z-10 before:h-80 before:w-80 before:translate-x-[var(--mouse-x)] before:translate-y-[var(--mouse-y)] before:rounded-full before:bg-indigo-900/90 before:opacity-0 before:blur-3xl before:transition-opacity before:duration-500 after:pointer-events-none after:absolute after:-left-48 after:-top-48 after:z-30 after:h-64 after:w-64 after:translate-x-[var(--mouse-x)] after:translate-y-[var(--mouse-y)] after:rounded-full after:bg-indigo-500 after:opacity-0 after:blur-3xl after:transition-opacity after:duration-500 after:hover:opacity-20 before:group-hover:opacity-100">
+          </div>
+        </Spotlight>
+      </section> */}
       <section style={{ marginBottom: 40, height: 200, width: 360, overflow: 'hidden' }}>
         <MeshGradientBackground />
       </section>
@@ -264,7 +287,15 @@ const Home = () => {
           </div>
         </div>
       </section>
-
+      <section style={{ margin: 20, fontSize: 40 }}>
+        <CountUp
+          start={20}
+          end={10000}
+          duration={10}
+          enableScrollSpy
+          scrollSpyDelay={1000}
+        />
+      </section>
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">