feat: add gsap motion to BossAI website

2026-06-06 06:18:40 +08:00
parent d467e27fd8
commit b40c522749
5 changed files with 224 additions and 120 deletions
@@ -0,0 +1,99 @@
+"use client";
+
+import { type ReactNode, useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(useGSAP, ScrollTrigger);
+
+type BossAiMotionProps = {
+  children: ReactNode;
+};
+
+export function BossAiMotion({ children }: BossAiMotionProps) {
+  const scopeRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+      gsap.set("[data-motion]", { autoAlpha: 1 });
+      gsap.set("[data-motion-line]", { transformOrigin: "center" });
+
+      if (reduceMotion) {
+        return;
+      }
+
+      const intro = gsap.timeline({ defaults: { ease: "power3.out" } });
+      intro
+        .from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
+        .from("[data-motion='hero-copy']", { autoAlpha: 0, y: 36, duration: 0.9 }, "-=0.35")
+        .from("[data-motion='hero-console']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.65")
+        .from("[data-motion='route-row']", { autoAlpha: 0, x: 24, duration: 0.55, stagger: 0.08 }, "-=0.45")
+        .from("[data-motion='node']", { autoAlpha: 0, scale: 0.94, duration: 0.45, stagger: 0.08 }, "-=0.3");
+
+      gsap.to("[data-motion-orbit]", {
+        rotate: 360,
+        duration: 28,
+        ease: "none",
+        repeat: -1,
+      });
+
+      gsap.to("[data-motion-dot]", {
+        scale: 1.18,
+        autoAlpha: 0.72,
+        duration: 1.4,
+        ease: "sine.inOut",
+        repeat: -1,
+        yoyo: true,
+        stagger: 0.24,
+      });
+
+      gsap.to("[data-motion-line]", {
+        strokeDashoffset: -160,
+        duration: 5.8,
+        ease: "none",
+        repeat: -1,
+        stagger: 0.28,
+      });
+
+      gsap.utils.toArray<HTMLElement>("[data-motion='section']").forEach((section) => {
+        gsap.from(section, {
+          autoAlpha: 0,
+          y: 42,
+          duration: 0.8,
+          ease: "power3.out",
+          scrollTrigger: {
+            trigger: section,
+            start: "top 82%",
+            once: true,
+          },
+        });
+      });
+
+      gsap.utils.toArray<HTMLElement>("[data-motion='card']").forEach((card, index) => {
+        gsap.from(card, {
+          autoAlpha: 0,
+          y: 28,
+          scale: 0.97,
+          duration: 0.62,
+          delay: index * 0.04,
+          ease: "power3.out",
+          scrollTrigger: {
+            trigger: card,
+            start: "top 88%",
+            once: true,
+          },
+        });
+      });
+    },
+    { scope: scopeRef },
+  );
+
+  return (
+    <div ref={scopeRef} className="motion-root">
+      {children}
+    </div>
+  );
+}