docs(landingpage): add star animation (#7697)

* chore: add star animation * chore: background * docs(landingpage): add animation * docs(landingpage): add animation * docs(landingpage): remove useless style
web-infra-dev · Aug 27, 2024 · eeeba2a · eeeba2a
1 parent 257f244
commit eeeba2a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 31 deletions.
diff --git a/website/theme/components/Landingpage/Hero/BackgroundStar.tsx b/website/theme/components/Landingpage/Hero/BackgroundStar.tsx
@@ -1,25 +1,56 @@
+import { useEffect, useRef, useState } from 'react';
 import styles from './index.module.scss';
 
 const BackgroundStar = ({
   top,
   left,
+  pageX,
+  pageY,
   size,
 }: {
   top: number | string;
   left: number | string;
+  pageX: number | null;
+  pageY: number | null;
   size: number;
 }) => {
+  const ref = useRef<any>();
+  const [transformX, setTransformX] = useState<number>(0);
+  const [transformY, setTransformY] = useState<number>(0);
+  useEffect(() => {
+    if (ref.current) {
+      const { x, y } = ref.current.getBoundingClientRect();
+
+      if (pageX && pageY) {
+        const distanceX = pageX - x;
+        const distanceY = pageY - y;
+        if (Math.abs(distanceX) < 100 && Math.abs(distanceY) < 100) {
+          setTransformX(distanceX);
+          setTransformY(distanceY);
+        } else {
+          setTransformX(0);
+          setTransformY(0);
+        }
+      }
+    }
+  }, [pageX, pageY]);
+
   return (
     <div
       className={styles.backgroundStarContainer}
+      ref={ref}
       style={{
         top,
         left,
       }}
     >
       <svg
         className={styles.backgroundStar}
-        style={{ width: size, height: size }}
+        style={{
+          width: size,
+          height: size,
+          transform: `translate(${transformX}px, ${transformY}px)`,
+        }}
         xmlns="http://www.w3.org/2000/svg"
         width="8"
         height="9"

diff --git a/website/theme/components/Landingpage/Hero/index.module.scss b/website/theme/components/Landingpage/Hero/index.module.scss
@@ -168,31 +168,19 @@
 }
 
 .backgroundStarContainer {
-  width: 50px;
-  height: 50px;
   position: absolute;
   top: 0;
   left: 0;
-  text-align: center;
-  line-height: 20px;
-  z-index: 100;
+  z-index: -1;
 
   user-select: none;
-  // pointer-events: none;
-
-  &:hover {
-    .backgroundStar {
-      transform: scale(2);
-    }
-  }
+  pointer-events: none;
 
   .backgroundStar {
     transition: all 0.2s;
-    display: inline;
-    flex-shrink: 0;
+    filter: blur(2px);
 
     user-select: none;
     pointer-events: none;
-    filter: blur(2px);
   }
 }
diff --git a/website/theme/components/Landingpage/Hero/index.tsx b/website/theme/components/Landingpage/Hero/index.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { useNavigate } from 'rspress/runtime';
 import { useI18n, useI18nUrl } from '../../../i18n';
 import BackgroundStar from './BackgroundStar';
@@ -7,7 +7,6 @@ import styles from './index.module.scss';
 const positions = [
   [91.4, 22.9],
   [36, 67.6],
-  [55.4, 96.7],
   [94.1, 47.7],
   [33.8, 32.5],
   [43.1, 77.6],
@@ -26,7 +25,6 @@ const positions = [
   [19, 18.4],
   [25.1, 28.1],
   [18.9, 35.6],
-  [39.8, 95.4],
   [32.9, 12.3],
   [21.2, 72.8],
   [83.3, 79.8],
@@ -44,16 +42,23 @@ const positions = [
   [68.2, 41.6],
 ];
 
-const stars = positions.map(([top, left], i) => {
-  return (
-    <BackgroundStar
-      key={i}
-      top={`${top}%`}
-      left={`${left}%`}
-      size={i / 40 + 3}
-    />
-  );
-});
+const useMouseMove = () => {
+  const ref = useRef<any>();
+  const [pageX, setPageX] = useState<null | number>(null);
+  const [pageY, setPageY] = useState<null | number>(null);
+
+  const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
+    setPageX(pageX);
+    setPageY(pageY);
+  };
+
+  return {
+    ref,
+    pageX,
+    pageY,
+    onMouseMove: handleMove,
+  };
+};
 
 const Hero = memo(() => {
   const tUrl = useI18nUrl();
@@ -68,9 +73,22 @@ const Hero = memo(() => {
     navigate(tUrl('/guide/start/introduction'));
   }, [tUrl, navigate]);
 
+  const { pageX, pageY, ref, onMouseMove } = useMouseMove();
+
   return (
-    <section className={styles.hero}>
-      {stars}
+    <section className={styles.hero} ref={ref} onMouseMove={onMouseMove}>
+      {positions.map(([top, left], i) => {
+        return (
+          <BackgroundStar
+            key={i}
+            top={`${top}%`}
+            left={`${left}%`}
+            size={i / 20 + 3}
+            pageX={pageX}
+            pageY={pageY}
+          />
+        );
+      })}
       <div className={styles.innerHero}>
         <div className={styles.logo}>
           <img