feat: enhance website model radar motion

2026-06-06 15:46:51 +08:00
parent be1fc1df48
commit 0d231ec467
3 changed files with 168 additions and 19 deletions
@@ -96,6 +96,71 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
          stagger: 0.28,
        });

+        const heroSection = root.querySelector<HTMLElement>(".hero-section");
+        const heroConsole = root.querySelector<HTMLElement>(".hero-console");
+        const routeRows = gsap.utils.toArray<HTMLElement>(".route-row", root);
+        const consoleTiles = gsap.utils.toArray<HTMLElement>(".console-metrics > div, .mini-grid > div", root);
+
+        if (heroSection && heroConsole) {
+          gsap.set(heroConsole, {
+            "--scan-y": "12%",
+            "--scan-opacity": 0.16,
+            "--grid-opacity": 0.16,
+          } as gsap.TweenVars);
+
+          gsap.to(heroConsole, {
+            yPercent: -4,
+            scale: 0.985,
+            ease: "none",
+            scrollTrigger: {
+              trigger: heroSection,
+              start: "top top",
+              end: "bottom top",
+              scrub: 0.85,
+            },
+          });
+
+          gsap.to(heroConsole, {
+            "--scan-y": "88%",
+            "--scan-opacity": 0.38,
+            "--grid-opacity": 0.34,
+            ease: "none",
+            scrollTrigger: {
+              trigger: heroSection,
+              start: "top 18%",
+              end: "bottom 18%",
+              scrub: 0.7,
+            },
+          } as gsap.TweenVars);
+
+          gsap.to(routeRows, {
+            x: (index) => (index % 2 === 0 ? -12 : 10),
+            y: (index) => -4 - index * 1.8,
+            autoAlpha: (index) => 1 - index * 0.025,
+            ease: "none",
+            stagger: 0.03,
+            scrollTrigger: {
+              trigger: heroConsole,
+              start: "top 76%",
+              end: "bottom 18%",
+              scrub: true,
+            },
+          });
+
+          gsap.to(consoleTiles, {
+            y: -12,
+            autoAlpha: 0.9,
+            ease: "none",
+            stagger: { each: 0.035, from: "end" },
+            scrollTrigger: {
+              trigger: heroConsole,
+              start: "top 72%",
+              end: "bottom 24%",
+              scrub: true,
+            },
+          });
+        }
+
        gsap.utils.toArray<HTMLElement>("[data-motion='section']").forEach((section) => {
          gsap.from(section, {
            autoAlpha: 0,