feat: add gsap motion to BossAI website

website/app/BossAiMotion.tsx

@@ -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>
+  );
+}

website/app/globals.css

@@ -59,6 +59,17 @@ a {
     linear-gradient(145deg, #040807 0%, #08110f 42%, #13221d 100%);
 }
 
+.motion-root {
+  min-height: 100dvh;
+}
+
+[data-motion],
+[data-motion-line],
+[data-motion-dot],
+[data-motion-orbit] {
+  will-change: transform, opacity;
+}
+
 .site-shell::before {
   position: fixed;
   inset: 0;
@@ -284,7 +295,6 @@ a {
   border: 1px solid rgba(215, 255, 77, 0.12);
   border-radius: 999px;
   background: radial-gradient(circle, rgba(215, 255, 77, 0.12), transparent 60%);
-  animation: slow-spin 24s linear infinite;
 }
 
 .console-orbit::after {
@@ -407,16 +417,13 @@ a {
   stroke-width: 2.5;
   stroke-linecap: round;
   stroke-dasharray: 12 18;
-  animation: flow-dash 8s linear infinite;
 }
 
 .flow-line-b {
-  animation-duration: 10s;
   opacity: 0.62;
 }
 
 .flow-line-c {
-  animation-duration: 7s;
   opacity: 0.48;
 }
 
@@ -431,15 +438,6 @@ a {
 .node {
   fill: rgba(255, 255, 255, 0.04);
   stroke: rgba(215, 255, 77, 0.22);
-  animation: node-float 5s ease-in-out infinite;
-}
-
-.node-b {
-  animation-delay: -1.5s;
-}
-
-.node-c {
-  animation-delay: -2.5s;
 }
 
 .platform-section,
@@ -497,8 +495,6 @@ a {
     linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
     rgba(255, 255, 255, 0.025);
   padding: 20px;
-  animation: card-rise 700ms ease both;
-  animation-delay: calc(var(--index) * 80ms);
 }
 
 .card-top {
@@ -799,36 +795,3 @@ a {
     box-shadow: 0 0 0 0 rgba(215, 255, 77, 0);
   }
 }
-
-@keyframes slow-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes flow-dash {
-  to {
-    stroke-dashoffset: -220;
-  }
-}
-
-@keyframes node-float {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-8px);
-  }
-}
-
-@keyframes card-rise {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

website/app/page.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+import { BossAiMotion } from "./BossAiMotion";
 
 const platformItems = [
   {
@@ -70,32 +71,44 @@ function FlowGlyph() {
           </feMerge>
         </filter>
       </defs>
-      <path className="flow-line flow-line-a" d="M48 180 C130 62 232 62 314 180 S438 298 488 154" />
-      <path className="flow-line flow-line-b" d="M58 236 C154 318 222 286 274 184 S358 24 462 92" />
-      <path className="flow-line flow-line-c" d="M92 108 C178 164 214 180 260 180 S330 174 424 250" />
+      <path
+        className="flow-line flow-line-a"
+        data-motion-line
+        d="M48 180 C130 62 232 62 314 180 S438 298 488 154"
+      />
+      <path
+        className="flow-line flow-line-b"
+        data-motion-line
+        d="M58 236 C154 318 222 286 274 184 S358 24 462 92"
+      />
+      <path
+        className="flow-line flow-line-c"
+        data-motion-line
+        d="M92 108 C178 164 214 180 260 180 S330 174 424 250"
+      />
       <g filter="url(#softGlow)">
-        <circle className="flow-dot dot-a" cx="48" cy="180" r="7" />
-        <circle className="flow-dot dot-b" cx="260" cy="180" r="9" />
-        <circle className="flow-dot dot-c" cx="488" cy="154" r="7" />
+        <circle className="flow-dot dot-a" data-motion-dot cx="48" cy="180" r="7" />
+        <circle className="flow-dot dot-b" data-motion-dot cx="260" cy="180" r="9" />
+        <circle className="flow-dot dot-c" data-motion-dot cx="488" cy="154" r="7" />
       </g>
-      <rect className="node node-a" x="72" y="58" width="128" height="68" rx="18" />
-      <rect className="node node-b" x="242" y="146" width="140" height="76" rx="20" />
-      <rect className="node node-c" x="352" y="248" width="120" height="62" rx="17" />
+      <rect className="node node-a" data-motion="node" x="72" y="58" width="128" height="68" rx="18" />
+      <rect className="node node-b" data-motion="node" x="242" y="146" width="140" height="76" rx="20" />
+      <rect className="node node-c" data-motion="node" x="352" y="248" width="120" height="62" rx="17" />
     </svg>
   );
 }
 
 function HeroConsole() {
   return (
-    <div className="hero-console" aria-label="BossAI 路由状态预览">
-      <div className="console-orbit" />
+    <div className="hero-console" data-motion="hero-console" aria-label="BossAI 路由状态预览">
+      <div className="console-orbit" data-motion-orbit />
       <div className="console-bar">
         <span>Unified Gateway</span>
         <strong>路由在线</strong>
       </div>
       <div className="route-list">
         {routes.map((route) => (
-          <div className="route-row" data-tone={route.tone} key={route.type}>
+          <div className="route-row" data-motion="route-row" data-tone={route.tone} key={route.type}>
             <span>{route.type}</span>
             <strong>{route.model}</strong>
             <em>{route.state}</em>
@@ -119,62 +132,68 @@ function HeroConsole() {
 
 export default function Home() {
   return (
-    <main className="site-shell">
-      <div className="site-noise" aria-hidden="true" />
-      <header className="site-nav">
-        <Link className="brand-mark" href="/" aria-label="BossAI 首页">
-          <Image src="/logo.png" width={38} height={38} alt="" priority />
-          <span>BossAI</span>
-        </Link>
-        <nav className="nav-links" aria-label="官网导航">
-          <a href="#platform">平台能力</a>
-          <a href="#workflow">工作流</a>
-          <a href="#factory">短视频工厂</a>
-          <a href="#deploy">部署</a>
-        </nav>
-        <div className="nav-actions">
-          <Link className="ghost-link" href="/user/login">
-            用户登录
+    <BossAiMotion>
+      <main className="site-shell">
+        <div className="site-noise" aria-hidden="true" />
+        <header className="site-nav" data-motion="nav">
+          <Link className="brand-mark" href="/" aria-label="BossAI 首页">
+            <Image src="/logo.png" width={38} height={38} alt="" priority />
+            <span>BossAI</span>
           </Link>
-          <Link className="solid-link" href="/boos">
-            进入后台
-          </Link>
-        </div>
-      </header>
-
-      <section className="hero-section">
-        <div className="hero-copy">
-          <div className="section-kicker">
-            <span className="pulse-dot" />
-            多模型 · 多模态 · 工作流
-          </div>
-          <h1>
-            聚合多模型
-            <span>多模态的 AI 应用平台</span>
-          </h1>
-          <p>
-            BossAI 把统一 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰后台，让团队专注生产，而不是到处切系统。
-          </p>
-          <div className="hero-actions">
-            <Link className="primary-cta" href="/user/register">
-              开始使用
+          <nav className="nav-links" aria-label="官网导航">
+            <a href="#platform">平台能力</a>
+            <a href="#workflow">工作流</a>
+            <a href="#factory">短视频工厂</a>
+            <a href="#deploy">部署</a>
+          </nav>
+          <div className="nav-actions">
+            <Link className="ghost-link" href="/user/login">
+              用户登录
             </Link>
-            <Link className="secondary-cta" href="#workflow">
-              查看工作流
+            <Link className="solid-link" href="/boos">
+              进入后台
             </Link>
           </div>
-        </div>
-        <HeroConsole />
-      </section>
+        </header>
 
-      <section id="platform" className="platform-section">
+        <section className="hero-section">
+          <div className="hero-copy" data-motion="hero-copy">
+            <div className="section-kicker">
+              <span className="pulse-dot" />
+              多模型 · 多模态 · 工作流
+            </div>
+            <h1>
+              聚合多模型
+              <span>多模态的 AI 应用平台</span>
+            </h1>
+            <p>
+              BossAI 把统一 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰后台，让团队专注生产，而不是到处切系统。
+            </p>
+            <div className="hero-actions">
+              <Link className="primary-cta" href="/user/register">
+                开始使用
+              </Link>
+              <Link className="secondary-cta" href="#workflow">
+                查看工作流
+              </Link>
+            </div>
+          </div>
+          <HeroConsole />
+        </section>
+
+      <section id="platform" className="platform-section" data-motion="section">
         <div className="section-heading">
           <span>Platform</span>
           <h2>一套后台，接住 API、工作流和创作应用</h2>
         </div>
         <div className="capability-grid">
           {platformItems.map((item, index) => (
-            <article className="capability-card" key={item.title} style={{ ["--index" as string]: index }}>
+            <article
+              className="capability-card"
+              data-motion="card"
+              key={item.title}
+              style={{ ["--index" as string]: index }}
+            >
               <div className="card-top">
                 <span>{item.eyebrow}</span>
                 <strong>{item.metric}</strong>
@@ -186,7 +205,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section id="workflow" className="workflow-section">
+      <section id="workflow" className="workflow-section" data-motion="section">
         <div className="workflow-panel">
           <div className="section-heading">
             <span>Workflow</span>
@@ -197,7 +216,7 @@ export default function Home() {
           </p>
           <div className="mode-list">
             {workflowModes.map(([key, label]) => (
-              <div key={key}>
+              <div data-motion="card" key={key}>
                 <code>{key}</code>
                 <span>{label}</span>
               </div>
@@ -205,30 +224,30 @@ export default function Home() {
           </div>
         </div>
         <div className="node-board" aria-label="工作流节点预览">
-          <div className="node-card wide">
+          <div className="node-card wide" data-motion="card">
             <span>Prompt</span>
             <strong>文案、角色、镜头、商品信息</strong>
           </div>
-          <div className="node-card">
+          <div className="node-card" data-motion="card">
             <span>Image</span>
             <strong>生图</strong>
           </div>
-          <div className="node-card">
+          <div className="node-card" data-motion="card">
             <span>Video</span>
             <strong>视频</strong>
           </div>
-          <div className="node-card">
+          <div className="node-card" data-motion="card">
             <span>Voice</span>
             <strong>TTS</strong>
           </div>
-          <div className="node-card">
+          <div className="node-card" data-motion="card">
             <span>Archive</span>
             <strong>工作空间</strong>
           </div>
         </div>
       </section>
 
-      <section id="factory" className="factory-section">
+      <section id="factory" className="factory-section" data-motion="section">
         <div className="factory-copy">
           <span>Creation OS</span>
           <h2>从提示词到短视频，从素材到数字人</h2>
@@ -238,12 +257,14 @@ export default function Home() {
         </div>
         <div className="module-strip">
           {productionModules.map((module) => (
-            <span key={module}>{module}</span>
+            <span data-motion="card" key={module}>
+              {module}
+            </span>
           ))}
         </div>
       </section>
 
-      <section id="deploy" className="deploy-section">
+      <section id="deploy" className="deploy-section" data-motion="section">
         <div>
           <span>Deploy</span>
           <h2>远程模型优先，本机不必有 GPU</h2>
@@ -252,22 +273,22 @@ export default function Home() {
           </p>
         </div>
         <div className="deploy-stack">
-          <div>
+          <div data-motion="card">
             <small>Backend</small>
             <strong>Rust 二进制</strong>
           </div>
-          <div>
+          <div data-motion="card">
             <small>Database</small>
             <strong>SQLite / PostgreSQL</strong>
           </div>
-          <div>
+          <div data-motion="card">
             <small>Website</small>
             <strong>Next.js 独立部署</strong>
           </div>
         </div>
       </section>
 
-      <section className="final-section">
+      <section className="final-section" data-motion="section">
         <h2>把模型、工作流和创作应用收进一个平台</h2>
         <p>适合自建 AI 中转、团队模型管理、多模态创作和商业化用户面板。</p>
         <div className="hero-actions">
@@ -279,6 +300,7 @@ export default function Home() {
           </Link>
         </div>
       </section>
-    </main>
+      </main>
+    </BossAiMotion>
   );
 }