boos/BoosAPI
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance website model radar motion

Browse Source
This commit is contained in:
boos
2026-06-06 15:46:51 +08:00
parent be1fc1df48
commit 0d231ec467
3 changed files with 168 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/BossAiMotion.tsx
+65
View File
@@ -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
+94 -11
View File
@@ -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
+9 -8
View File
@@ -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: "Claude", model: "/v1/messages", state: "流式", tone: "white" },
{ type: "Video", model: "doubao-seedance-2-0-260128", state: "排队中", tone: "blue" },
];
const consoleMetrics = [
{ label: "日志写入", value: "real-time" },
{ label: "计费口径", value: "token + image" },
{ label: "失败冷却", value: "auto" },
{ label: "日志写入", value: "stream" },
{ label: "计费口径", value: "token + media" },
{ 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>
<strong>路由在线</strong>
<span>Model Radar</span>
<strong>主流模型在线</strong>
</div>
<div className="route-list">
{routes.map((route) => (