feat: enhance website model radar motion

website/app/BossAiMotion.tsx

@@ -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,

website/app/globals.css

@@ -364,23 +364,61 @@ a {
 }
 
 .hero-console {
+  --scan-y: 12%;
+  --scan-opacity: 0.16;
+  --grid-opacity: 0.16;
   position: relative;
   margin-top: 14px;
-  min-height: 500px;
+  min-height: 520px;
   border: 1px solid var(--line);
   border-radius: 32px;
   background:
+    radial-gradient(circle at 18% 18%, rgba(215, 255, 77, 0.15), transparent 32%),
+    radial-gradient(circle at 86% 82%, rgba(139, 246, 255, 0.13), transparent 34%),
     linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
     rgba(10, 20, 18, 0.84);
   padding: 18px;
   overflow: hidden;
+  transform-style: preserve-3d;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.16),
     0 34px 90px rgba(0, 0, 0, 0.36);
 }
 
+.hero-console::before,
+.hero-console::after {
+  position: absolute;
+  inset-inline: 14px;
+  pointer-events: none;
+  content: "";
+}
+
+.hero-console::before {
+  z-index: 1;
+  top: 0;
+  height: 124px;
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, transparent, rgba(215, 255, 77, 0.18), rgba(139, 246, 255, 0.12), transparent);
+  filter: blur(10px);
+  opacity: var(--scan-opacity);
+  transform: translate3d(0, var(--scan-y), 0);
+}
+
+.hero-console::after {
+  z-index: 0;
+  inset-block: 72px 18px;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: linear-gradient(to bottom, transparent, black 12%, black 72%, transparent);
+  opacity: var(--grid-opacity);
+}
+
 .console-orbit {
   position: absolute;
+  z-index: 0;
   width: 420px;
   height: 420px;
   right: -120px;
@@ -428,7 +466,7 @@ a {
 
 .console-bar {
   position: relative;
-  z-index: 2;
+  z-index: 3;
   min-height: 54px;
   display: flex;
   align-items: center;
@@ -457,21 +495,23 @@ a {
 
 .route-list {
   position: relative;
-  z-index: 2;
+  z-index: 3;
   display: grid;
-  gap: 10px;
+  gap: 8px;
   margin-top: 12px;
 }
 
 .route-row {
   position: relative;
-  min-height: 58px;
+  min-height: 50px;
   display: grid;
-  grid-template-columns: 78px 1fr auto;
+  grid-template-columns: 76px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 14px;
+  gap: 12px;
   border-radius: 18px;
   padding: 0 14px 0 32px;
+  overflow: hidden;
+  transform: translateZ(0);
 }
 
 .route-row::before {
@@ -487,6 +527,19 @@ a {
   font-weight: 800;
 }
 
+.route-row strong {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.route-row em {
+  white-space: nowrap;
+}
+
 .route-row[data-tone="hot"] span {
   color: #ffec99;
 }
@@ -500,6 +553,11 @@ a {
   color: var(--acid);
 }
 
+.route-row[data-tone="lime"]::before {
+  background: var(--acid);
+  box-shadow: 0 0 20px rgba(215, 255, 77, 0.5);
+}
+
 .route-row[data-tone="blue"] span {
   color: var(--blue);
 }
@@ -509,6 +567,24 @@ a {
   box-shadow: 0 0 20px rgba(139, 246, 255, 0.5);
 }
 
+.route-row[data-tone="cyan"] span {
+  color: #71ffd2;
+}
+
+.route-row[data-tone="cyan"]::before {
+  background: #71ffd2;
+  box-shadow: 0 0 20px rgba(113, 255, 210, 0.48);
+}
+
+.route-row[data-tone="white"] span {
+  color: var(--ice);
+}
+
+.route-row[data-tone="white"]::before {
+  background: var(--ice);
+  box-shadow: 0 0 20px rgba(233, 247, 255, 0.42);
+}
+
 .route-row strong,
 .console-metrics strong,
 .mini-grid strong,
@@ -520,7 +596,7 @@ a {
 
 .console-metrics {
   position: relative;
-  z-index: 2;
+  z-index: 3;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
@@ -528,7 +604,7 @@ a {
 }
 
 .console-metrics > div {
-  min-height: 70px;
+  min-height: 66px;
   display: grid;
   align-content: center;
   gap: 7px;
@@ -540,11 +616,12 @@ a {
   color: var(--acid);
   font-family: var(--font-geist-mono), monospace;
   font-size: 12px;
+  white-space: nowrap;
 }
 
 .mini-grid {
   position: relative;
-  z-index: 2;
+  z-index: 3;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
@@ -552,7 +629,7 @@ a {
 }
 
 .mini-grid > div {
-  min-height: 88px;
+  min-height: 80px;
   display: grid;
   align-content: end;
   gap: 8px;
@@ -562,6 +639,7 @@ a {
 
 .flow-glyph {
   position: absolute;
+  z-index: 1;
   right: -22px;
   bottom: -8px;
   width: 92%;
@@ -1166,6 +1244,11 @@ a {
     gap: 6px;
     min-height: 72px;
     padding-block: 12px;
+    padding-right: 12px;
+  }
+
+  .route-row strong {
+    max-width: 100%;
   }
 
   .route-row em {

website/app/page.tsx

@@ -36,16 +36,17 @@ const heroStats = [
 ];
 
 const routes = [
-  { type: "Chat", model: "gpt-5.4", state: "已路由", tone: "hot" },
+  { type: "Reason", model: "gpt-5.5", state: "xhigh", tone: "hot" },
+  { type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "white" },
+  { type: "Gemini", model: "gemini-3-pro-preview", state: "多模态", tone: "cyan" },
   { type: "Image", model: "gpt-image-2", state: "生成中", tone: "lime" },
-  { type: "Video", model: "seedance", state: "排队中", tone: "blue" },
+  { type: "Video", model: "doubao-seedance-2-0-260128", state: "排队中", tone: "blue" },
-  { type: "Claude", model: "/v1/messages", state: "流式", tone: "white" },
 ];
 
 const consoleMetrics = [
-  { label: "日志写入", value: "real-time" },
+  { label: "日志写入", value: "stream" },
-  { label: "计费口径", value: "token + image" },
+  { label: "计费口径", value: "token + media" },
-  { label: "失败冷却", value: "auto" },
+  { label: "失败冷却", value: "auto reroute" },
 ];
 
 const studioFlow = [
@@ -187,8 +188,8 @@ function HeroConsole() {
     <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>
+        <span>Model Radar</span>
-        <strong>路由在线</strong>
+        <strong>主流模型在线</strong>
       </div>
       <div className="route-list">
         {routes.map((route) => (