feat: refine BoosAPI console and user workspace
This commit is contained in:
boos
+169
-77
@@ -11,6 +11,7 @@ import { SplitText } from "gsap/SplitText";
|
||||
gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin, SplitText, CustomEase);
|
||||
|
||||
const bossEase = CustomEase.create("boss-ease", "M0,0 C0.18,0.84 0.32,1 1,1");
|
||||
const ANCHOR_NAV_EVENT = "bossai:anchor-nav";
|
||||
|
||||
type BossAiMotionProps = {
|
||||
children: ReactNode;
|
||||
@@ -26,60 +27,55 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bootScreen = root.querySelector<HTMLElement>(".boot-screen");
|
||||
const completeBoot = () => {
|
||||
bootScreen?.classList.add("boot-screen-done");
|
||||
};
|
||||
const bootFailSafe = window.setTimeout(completeBoot, 4600);
|
||||
const select = gsap.utils.selector(root);
|
||||
|
||||
try {
|
||||
root.classList.add("motion-enhanced");
|
||||
gsap.set("[data-motion]", { autoAlpha: 1 });
|
||||
gsap.set("[data-motion-line]", { transformOrigin: "center" });
|
||||
gsap.set(select("[data-motion]"), { autoAlpha: 1 });
|
||||
gsap.set(select("[data-motion-line]"), { transformOrigin: "center" });
|
||||
|
||||
const matchMedia = gsap.matchMedia();
|
||||
const cleanupAnchors = setupSmoothAnchors(root);
|
||||
const cleanupActiveNav = setupActiveNavigation(root);
|
||||
const cleanupCompactNav = setupCompactNavigation(root);
|
||||
|
||||
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
|
||||
root.classList.add("motion-ready");
|
||||
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line], .boot-screen", {
|
||||
gsap.set(select("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]"), {
|
||||
autoAlpha: 1,
|
||||
clearProps: "transform",
|
||||
});
|
||||
gsap.set(".boot-screen", { display: "none" });
|
||||
completeBoot();
|
||||
});
|
||||
|
||||
matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
|
||||
root.classList.add("motion-ready");
|
||||
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
|
||||
gsap.set(select("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]"), {
|
||||
autoAlpha: 1,
|
||||
clearProps: "transform",
|
||||
});
|
||||
|
||||
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase, overwrite: "auto" } });
|
||||
mobileIntro
|
||||
.set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
|
||||
.from(".boot-frame", { y: 12, scale: 0.99, duration: 0.28, ease: "power3.out" })
|
||||
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.34, transformOrigin: "left center" }, "-=0.08")
|
||||
.fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.5, transformOrigin: "left center" }, "-=0.04")
|
||||
.to(".boot-screen", { autoAlpha: 0, yPercent: -2, duration: 0.34, ease: "power3.inOut", delay: 0.06 })
|
||||
.set(".boot-screen", { display: "none" })
|
||||
.call(completeBoot);
|
||||
.from(select("[data-motion='nav'], [data-motion='mobile-nav']"), { y: -8, duration: 0.32 })
|
||||
.from(select(".hero-copy > *"), { y: 10, duration: 0.34, stagger: 0.04 }, "-=0.18")
|
||||
.from(select("[data-motion='hero-console']"), { y: 14, duration: 0.38 }, "-=0.22");
|
||||
|
||||
gsap.to("[data-motion-dot]", {
|
||||
gsap.to(select("[data-motion-dot]"), {
|
||||
scale: 1.14,
|
||||
autoAlpha: 0.76,
|
||||
duration: 1.4,
|
||||
ease: "sine.inOut",
|
||||
overwrite: "auto",
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
stagger: 0.2,
|
||||
});
|
||||
|
||||
gsap.to("[data-motion-line]", {
|
||||
gsap.to(select("[data-motion-line]"), {
|
||||
strokeDashoffset: -120,
|
||||
duration: 6,
|
||||
ease: "none",
|
||||
overwrite: "auto",
|
||||
repeat: -1,
|
||||
stagger: 0.24,
|
||||
});
|
||||
@@ -96,61 +92,54 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
})
|
||||
: null;
|
||||
|
||||
const intro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||
const intro = gsap.timeline({ defaults: { ease: bossEase, overwrite: "auto" } });
|
||||
intro
|
||||
.set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
|
||||
.from(".boot-frame", { y: 20, scale: 0.985, duration: 0.42, ease: "power3.out" })
|
||||
.from(".boot-mark", { scale: 0.72, rotate: -16, duration: 0.36 }, "-=0.18")
|
||||
.from(".boot-brand strong", { x: -8, duration: 0.32 }, "-=0.24")
|
||||
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.56, transformOrigin: "left center" }, "-=0.12")
|
||||
.from(".boot-lines p", { y: 8, duration: 0.28, stagger: 0.07 }, "-=0.2")
|
||||
.fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.72, transformOrigin: "left center" }, "-=0.08")
|
||||
.to(".boot-screen", { autoAlpha: 0, yPercent: -4, duration: 0.62, ease: "power3.inOut", delay: 0.08 })
|
||||
.set(".boot-screen", { display: "none" })
|
||||
.call(completeBoot)
|
||||
.from("[data-motion='nav']", { y: -14, duration: 0.7 })
|
||||
.from(".section-kicker", { y: 14, duration: 0.56 }, "-=0.18")
|
||||
.from(select("[data-motion='nav']"), { y: -14, duration: 0.7 })
|
||||
.from(select(".section-kicker"), { y: 14, duration: 0.56 }, "-=0.18")
|
||||
.from(
|
||||
splitTitle?.words ?? ".hero-copy h1",
|
||||
splitTitle?.words ?? select(".hero-copy h1"),
|
||||
{
|
||||
yPercent: 18,
|
||||
rotateX: -6,
|
||||
rotationX: -6,
|
||||
transformOrigin: "50% 100%",
|
||||
duration: 0.82,
|
||||
duration: 0.68,
|
||||
stagger: { each: 0.035, from: "start" },
|
||||
},
|
||||
"-=0.28",
|
||||
)
|
||||
.from(".hero-copy p", { y: 18, duration: 0.7 }, "-=0.5")
|
||||
.from("[data-motion='signal']", { y: 10, duration: 0.42, stagger: 0.06 }, "-=0.42")
|
||||
.from(".hero-actions > *", { y: 12, duration: 0.46, stagger: 0.08 }, "-=0.42")
|
||||
.from(".hero-proof > div", { y: 12, duration: 0.5, stagger: 0.07 }, "-=0.28")
|
||||
.from("[data-motion='hero-console']", { y: 26, rotateX: 4, duration: 0.9 }, "-=0.78")
|
||||
.from("[data-motion='exchange-step']", { y: 12, duration: 0.48, stagger: 0.06 }, "-=0.58")
|
||||
.from("[data-motion='route-row']", { x: 14, duration: 0.55, stagger: 0.08 }, "-=0.48")
|
||||
.from("[data-motion='node']", { scale: 0.96, duration: 0.45, stagger: 0.08 }, "-=0.3");
|
||||
.from(select(".hero-copy p"), { y: 18, duration: 0.7 }, "-=0.5")
|
||||
.from(select("[data-motion='signal']"), { y: 10, duration: 0.42, stagger: 0.06 }, "-=0.42")
|
||||
.from(select(".hero-actions > *"), { y: 12, duration: 0.46, stagger: 0.08 }, "-=0.42")
|
||||
.from(select(".hero-proof > div"), { y: 12, duration: 0.5, stagger: 0.07 }, "-=0.28")
|
||||
.from(select("[data-motion='hero-console']"), { y: 22, rotationX: 3, duration: 0.72 }, "-=0.68")
|
||||
.from(select("[data-motion='exchange-step']"), { y: 12, duration: 0.48, stagger: 0.06 }, "-=0.58")
|
||||
.from(select("[data-motion='route-row']"), { x: 14, duration: 0.55, stagger: 0.08 }, "-=0.48")
|
||||
.from(select("[data-motion='node']"), { scale: 0.96, duration: 0.45, stagger: 0.08 }, "-=0.3");
|
||||
|
||||
gsap.to("[data-motion-orbit]", {
|
||||
rotate: 360,
|
||||
gsap.to(select("[data-motion-orbit]"), {
|
||||
rotation: 360,
|
||||
duration: 28,
|
||||
ease: "none",
|
||||
overwrite: "auto",
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
gsap.to("[data-motion-dot]", {
|
||||
gsap.to(select("[data-motion-dot]"), {
|
||||
scale: 1.18,
|
||||
autoAlpha: 0.72,
|
||||
duration: 1.4,
|
||||
ease: "sine.inOut",
|
||||
overwrite: "auto",
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
stagger: 0.24,
|
||||
});
|
||||
|
||||
gsap.to("[data-motion-line]", {
|
||||
gsap.to(select("[data-motion-line]"), {
|
||||
strokeDashoffset: -160,
|
||||
duration: 5.8,
|
||||
ease: "none",
|
||||
overwrite: "auto",
|
||||
repeat: -1,
|
||||
stagger: 0.28,
|
||||
});
|
||||
@@ -234,7 +223,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
});
|
||||
}
|
||||
|
||||
gsap.utils.toArray<HTMLElement>("[data-motion='section']").forEach((section) => {
|
||||
gsap.utils.toArray<HTMLElement>("[data-motion='section']", root).forEach((section) => {
|
||||
gsap.from(section, {
|
||||
autoAlpha: 0,
|
||||
y: 42,
|
||||
@@ -249,7 +238,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
});
|
||||
|
||||
gsap.utils
|
||||
.toArray<HTMLElement>("[data-motion='card']")
|
||||
.toArray<HTMLElement>("[data-motion='card']", root)
|
||||
.filter((card) => !card.closest(".hero-section"))
|
||||
.forEach((card, index) => {
|
||||
gsap.from(card, {
|
||||
@@ -267,32 +256,26 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
});
|
||||
});
|
||||
|
||||
const cleanupAnchors = setupSmoothAnchors(root);
|
||||
const cleanupActiveNav = setupActiveNavigation(root);
|
||||
const cleanupMagneticCards = window.matchMedia("(hover: hover) and (pointer: fine)").matches
|
||||
? setupMagneticCards(root)
|
||||
: () => undefined;
|
||||
|
||||
return () => {
|
||||
cleanupMagneticCards();
|
||||
cleanupActiveNav();
|
||||
cleanupAnchors();
|
||||
splitTitle?.revert();
|
||||
};
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(bootFailSafe);
|
||||
cleanupCompactNav();
|
||||
cleanupActiveNav();
|
||||
cleanupAnchors();
|
||||
matchMedia.revert();
|
||||
root.classList.remove("motion-enhanced", "motion-ready");
|
||||
};
|
||||
} catch (error) {
|
||||
console.warn("BossAI motion setup failed; using CSS boot fallback.", error);
|
||||
console.warn("BossAI motion setup failed; using static website state.", error);
|
||||
root.classList.remove("motion-enhanced", "motion-ready");
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(bootFailSafe);
|
||||
};
|
||||
}
|
||||
},
|
||||
{ scope: scopeRef },
|
||||
@@ -307,6 +290,34 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
|
||||
function setupSmoothAnchors(root: HTMLElement) {
|
||||
const anchors = gsap.utils.toArray<HTMLAnchorElement>("a[href^='#']", root);
|
||||
let activeScrollTween: gsap.core.Tween | null = null;
|
||||
let pendingFocusTarget: HTMLElement | null = null;
|
||||
let rootScrollStateTimer: number | null = null;
|
||||
const reduceMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const readAnchorOffset = () => {
|
||||
const rawOffset = window.getComputedStyle(document.documentElement).getPropertyValue("--anchor-offset");
|
||||
const parsedOffset = Number.parseFloat(rawOffset);
|
||||
return Number.isFinite(parsedOffset) ? parsedOffset : 22;
|
||||
};
|
||||
|
||||
const clearScrollState = () => {
|
||||
root.classList.remove("is-anchor-scrolling");
|
||||
if (rootScrollStateTimer) {
|
||||
window.clearTimeout(rootScrollStateTimer);
|
||||
rootScrollStateTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const focusTarget = (target: HTMLElement) => {
|
||||
const previousTabIndex = target.getAttribute("tabindex");
|
||||
target.setAttribute("tabindex", "-1");
|
||||
target.focus({ preventScroll: true });
|
||||
if (previousTabIndex === null) {
|
||||
target.removeAttribute("tabindex");
|
||||
} else {
|
||||
target.setAttribute("tabindex", previousTabIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const cleanups = anchors.map((anchor) => {
|
||||
const onClick = (event: MouseEvent) => {
|
||||
@@ -319,11 +330,35 @@ function setupSmoothAnchors(root: HTMLElement) {
|
||||
|
||||
event.preventDefault();
|
||||
window.history.pushState(null, "", href);
|
||||
gsap.to(window, {
|
||||
window.dispatchEvent(new Event(ANCHOR_NAV_EVENT));
|
||||
activeScrollTween?.kill();
|
||||
pendingFocusTarget = target;
|
||||
if (reduceMotionQuery.matches) {
|
||||
target.scrollIntoView({ block: "start" });
|
||||
focusTarget(target);
|
||||
pendingFocusTarget = null;
|
||||
clearScrollState();
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.add("is-anchor-scrolling");
|
||||
if (rootScrollStateTimer) {
|
||||
window.clearTimeout(rootScrollStateTimer);
|
||||
}
|
||||
rootScrollStateTimer = window.setTimeout(clearScrollState, 1400);
|
||||
activeScrollTween = gsap.to(window, {
|
||||
duration: 0.92,
|
||||
ease: bossEase,
|
||||
overwrite: "auto",
|
||||
scrollTo: { y: target, offsetY: 22 },
|
||||
scrollTo: { y: target, offsetY: readAnchorOffset() },
|
||||
onComplete: () => {
|
||||
if (pendingFocusTarget === target) {
|
||||
focusTarget(target);
|
||||
pendingFocusTarget = null;
|
||||
}
|
||||
clearScrollState();
|
||||
},
|
||||
onInterrupt: clearScrollState,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -331,24 +366,53 @@ function setupSmoothAnchors(root: HTMLElement) {
|
||||
return () => anchor.removeEventListener("click", onClick);
|
||||
});
|
||||
|
||||
return () => cleanups.forEach((cleanup) => cleanup());
|
||||
return () => {
|
||||
activeScrollTween?.kill();
|
||||
activeScrollTween = null;
|
||||
pendingFocusTarget = null;
|
||||
clearScrollState();
|
||||
cleanups.forEach((cleanup) => cleanup());
|
||||
};
|
||||
}
|
||||
|
||||
function setupActiveNavigation(root: HTMLElement) {
|
||||
const links = gsap.utils.toArray<HTMLAnchorElement>(".nav-links a[href^='#']", root);
|
||||
const linkById = new Map(
|
||||
const links = gsap.utils.toArray<HTMLAnchorElement>(".nav-links a[href^='#'], .mobile-nav-rail a[href^='#']", root);
|
||||
const linkedSectionIds = new Set(
|
||||
links
|
||||
.map((link) => [link.getAttribute("href")?.slice(1), link] as const)
|
||||
.filter((entry): entry is readonly [string, HTMLAnchorElement] => Boolean(entry[0])),
|
||||
.map((link) => link.getAttribute("href")?.slice(1))
|
||||
.filter((id): id is string => Boolean(id)),
|
||||
);
|
||||
|
||||
const setActive = (id: string) => {
|
||||
links.forEach((link) => link.classList.toggle("is-active", linkById.get(id) === link));
|
||||
links.forEach((link) => {
|
||||
const active = link.getAttribute("href") === `#${id}`;
|
||||
link.classList.toggle("is-active", active);
|
||||
if (active) {
|
||||
link.setAttribute("aria-current", "true");
|
||||
} else {
|
||||
link.removeAttribute("aria-current");
|
||||
}
|
||||
});
|
||||
|
||||
const activeMobileLink = links.find((link) => (
|
||||
link.getAttribute("href") === `#${id}` && Boolean(link.closest(".mobile-nav-rail"))
|
||||
));
|
||||
activeMobileLink?.scrollIntoView({
|
||||
block: "nearest",
|
||||
inline: "center",
|
||||
});
|
||||
};
|
||||
|
||||
const syncActiveFromHash = () => {
|
||||
const activeId = window.location.hash.slice(1);
|
||||
if (activeId && linkedSectionIds.has(activeId)) {
|
||||
setActive(activeId);
|
||||
}
|
||||
};
|
||||
|
||||
const triggers = gsap.utils
|
||||
.toArray<HTMLElement>("section[id]", root)
|
||||
.filter((section) => linkById.has(section.id))
|
||||
.filter((section) => linkedSectionIds.has(section.id))
|
||||
.map((section) =>
|
||||
ScrollTrigger.create({
|
||||
trigger: section,
|
||||
@@ -359,9 +423,32 @@ function setupActiveNavigation(root: HTMLElement) {
|
||||
}),
|
||||
);
|
||||
|
||||
syncActiveFromHash();
|
||||
window.addEventListener("hashchange", syncActiveFromHash);
|
||||
window.addEventListener(ANCHOR_NAV_EVENT, syncActiveFromHash);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("hashchange", syncActiveFromHash);
|
||||
window.removeEventListener(ANCHOR_NAV_EVENT, syncActiveFromHash);
|
||||
triggers.forEach((trigger) => trigger.kill());
|
||||
links.forEach((link) => link.classList.remove("is-active"));
|
||||
links.forEach((link) => {
|
||||
link.classList.remove("is-active");
|
||||
link.removeAttribute("aria-current");
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function setupCompactNavigation(root: HTMLElement) {
|
||||
const syncCompactState = () => {
|
||||
root.classList.toggle("is-nav-compact", window.scrollY > 18);
|
||||
};
|
||||
|
||||
syncCompactState();
|
||||
window.addEventListener("scroll", syncCompactState, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", syncCompactState);
|
||||
root.classList.remove("is-nav-compact");
|
||||
};
|
||||
}
|
||||
|
||||
@@ -371,14 +458,18 @@ function setupMagneticCards(root: HTMLElement) {
|
||||
const cleanups = cards.map((card) => {
|
||||
const onPointerMove = (event: PointerEvent) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
if (!rect.width || !rect.height) {
|
||||
return;
|
||||
}
|
||||
|
||||
const xRatio = (event.clientX - rect.left) / rect.width - 0.5;
|
||||
const yRatio = (event.clientY - rect.top) / rect.height - 0.5;
|
||||
|
||||
gsap.to(card, {
|
||||
x: xRatio * 10,
|
||||
y: yRatio * 10,
|
||||
rotateX: yRatio * -3,
|
||||
rotateY: xRatio * 4,
|
||||
x: xRatio * 6,
|
||||
y: yRatio * 6,
|
||||
rotationX: yRatio * -2,
|
||||
rotationY: xRatio * 2.5,
|
||||
duration: 0.38,
|
||||
ease: "power3.out",
|
||||
overwrite: "auto",
|
||||
@@ -389,8 +480,8 @@ function setupMagneticCards(root: HTMLElement) {
|
||||
gsap.to(card, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
rotationX: 0,
|
||||
rotationY: 0,
|
||||
duration: 0.58,
|
||||
ease: bossEase,
|
||||
overwrite: "auto",
|
||||
@@ -403,6 +494,7 @@ function setupMagneticCards(root: HTMLElement) {
|
||||
return () => {
|
||||
card.removeEventListener("pointermove", onPointerMove);
|
||||
card.removeEventListener("pointerleave", onPointerLeave);
|
||||
gsap.killTweensOf(card);
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
+971
-255
File diff suppressed because it is too large
Load Diff
+1
-14
@@ -1,19 +1,6 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geist = Geist({
|
||||
variable: "--font-geist",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "BossAI | 聚合多模型多模态的 AI 应用平台",
|
||||
description:
|
||||
@@ -49,7 +36,7 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="zh-CN">
|
||||
<body className={`${geist.variable} ${geistMono.variable}`}>{children}</body>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type * as ThreeNamespace from "three";
|
||||
|
||||
type ThreeRuntime = typeof ThreeNamespace;
|
||||
|
||||
function shouldSkipWebgl() {
|
||||
if (typeof window === "undefined") {
|
||||
return true;
|
||||
}
|
||||
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
|
||||
const narrowScreen = window.matchMedia("(max-width: 720px)").matches;
|
||||
const memory = typeof navigator !== "undefined"
|
||||
? (navigator as Navigator & { deviceMemory?: number }).deviceMemory
|
||||
: undefined;
|
||||
|
||||
return reduceMotion || (coarsePointer && narrowScreen) || (typeof memory === "number" && memory <= 3);
|
||||
}
|
||||
|
||||
export default function AcidThreeField() {
|
||||
const mountRef = useRef<HTMLDivElement>(null);
|
||||
const [fallback, setFallback] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mount = mountRef.current;
|
||||
if (!mount) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (shouldSkipWebgl()) {
|
||||
setFallback(true);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
let frameId = 0;
|
||||
let disposed = false;
|
||||
let cleanup: (() => void) | undefined;
|
||||
|
||||
import("three")
|
||||
.then((THREE) => {
|
||||
if (disposed || !mountRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
cleanup = createScene(THREE, mountRef.current);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!disposed) {
|
||||
setFallback(true);
|
||||
}
|
||||
});
|
||||
|
||||
function createScene(THREE: ThreeRuntime, target: HTMLDivElement) {
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
alpha: true,
|
||||
antialias: false,
|
||||
preserveDrawingBuffer: true,
|
||||
powerPreference: "low-power",
|
||||
});
|
||||
renderer.setClearColor(0x000000, 0);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.35));
|
||||
renderer.setSize(target.clientWidth, target.clientHeight, false);
|
||||
target.appendChild(renderer.domElement);
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(46, 1, 0.1, 100);
|
||||
camera.position.set(0, 0, 9);
|
||||
|
||||
const group = new THREE.Group();
|
||||
scene.add(group);
|
||||
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const count = 340;
|
||||
const positions = new Float32Array(count * 3);
|
||||
const colors = new Float32Array(count * 3);
|
||||
const color = new THREE.Color();
|
||||
|
||||
for (let index = 0; index < count; index += 1) {
|
||||
const radius = 1.3 + Math.random() * 4.2;
|
||||
const angle = index * 0.43;
|
||||
const spin = Math.sin(index * 1.17) * 0.8;
|
||||
positions[index * 3] = Math.cos(angle) * radius + spin;
|
||||
positions[index * 3 + 1] = Math.sin(angle * 1.14) * radius * 0.72;
|
||||
positions[index * 3 + 2] = (Math.random() - 0.5) * 4.4;
|
||||
|
||||
const hue = (0.28 + (index % 96) / 180) % 1;
|
||||
color.setHSL(hue, 0.92, index % 3 === 0 ? 0.66 : 0.53);
|
||||
colors[index * 3] = color.r;
|
||||
colors[index * 3 + 1] = color.g;
|
||||
colors[index * 3 + 2] = color.b;
|
||||
}
|
||||
|
||||
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
|
||||
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
|
||||
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: 0.075,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 0.76,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending,
|
||||
});
|
||||
|
||||
const particles = new THREE.Points(geometry, material);
|
||||
group.add(particles);
|
||||
|
||||
const knot = new THREE.Mesh(
|
||||
new THREE.TorusKnotGeometry(1.24, 0.22, 96, 12, 2, 5),
|
||||
new THREE.MeshBasicMaterial({
|
||||
color: 0xd7ff2d,
|
||||
transparent: true,
|
||||
opacity: 0.24,
|
||||
wireframe: true,
|
||||
}),
|
||||
);
|
||||
knot.position.set(1.4, -0.2, -0.8);
|
||||
group.add(knot);
|
||||
|
||||
const ring = new THREE.Mesh(
|
||||
new THREE.TorusGeometry(3.1, 0.018, 8, 120),
|
||||
new THREE.MeshBasicMaterial({
|
||||
color: 0x69ffe0,
|
||||
transparent: true,
|
||||
opacity: 0.34,
|
||||
}),
|
||||
);
|
||||
ring.rotation.set(1.12, 0.14, -0.24);
|
||||
group.add(ring);
|
||||
|
||||
const syncSize = () => {
|
||||
const width = Math.max(target.clientWidth, 1);
|
||||
const height = Math.max(target.clientHeight, 1);
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(width, height, false);
|
||||
};
|
||||
|
||||
const onPointerMove = (event: PointerEvent) => {
|
||||
const x = event.clientX / Math.max(window.innerWidth, 1) - 0.5;
|
||||
const y = event.clientY / Math.max(window.innerHeight, 1) - 0.5;
|
||||
group.rotation.y = x * 0.34;
|
||||
group.rotation.x = y * -0.18;
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
const time = performance.now() * 0.001;
|
||||
particles.rotation.z = time * 0.055;
|
||||
particles.rotation.y = time * 0.04;
|
||||
knot.rotation.x = time * 0.21;
|
||||
knot.rotation.y = time * 0.28;
|
||||
ring.rotation.z = time * -0.08;
|
||||
renderer.render(scene, camera);
|
||||
frameId = window.requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
syncSize();
|
||||
window.addEventListener("resize", syncSize, { passive: true });
|
||||
window.addEventListener("pointermove", onPointerMove, { passive: true });
|
||||
frameId = window.requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
window.removeEventListener("resize", syncSize);
|
||||
window.removeEventListener("pointermove", onPointerMove);
|
||||
group.clear();
|
||||
geometry.dispose();
|
||||
material.dispose();
|
||||
knot.geometry.dispose();
|
||||
if (Array.isArray(knot.material)) {
|
||||
knot.material.forEach((item) => item.dispose());
|
||||
} else {
|
||||
knot.material.dispose();
|
||||
}
|
||||
ring.geometry.dispose();
|
||||
if (Array.isArray(ring.material)) {
|
||||
ring.material.forEach((item) => item.dispose());
|
||||
} else {
|
||||
ring.material.dispose();
|
||||
}
|
||||
renderer.dispose();
|
||||
renderer.domElement.remove();
|
||||
};
|
||||
}
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
window.cancelAnimationFrame(frameId);
|
||||
cleanup?.();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={mountRef}
|
||||
className={fallback ? "new-acid-three is-fallback" : "new-acid-three"}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import AcidThreeField from "./AcidThreeField";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "BossAI / New Signal",
|
||||
description:
|
||||
"BossAI 官网实验页：以高反差酸性图形语言展示统一 API 网关、模型路由、Comfy 工作流和创作生产平台。",
|
||||
};
|
||||
|
||||
const signalCards = [
|
||||
["Gateway", "/v1/*", "OpenAI、Claude、图像、视频和语音请求进入同一套鉴权、路由、日志和计费。"],
|
||||
["Router", "P0 / P1", "按站点、账号、模型能力、失败冷却和成本信号选择可用通道。"],
|
||||
["Comfy", "Cloud API", "Comfy Cloud、RunningHub、External 和 BoosAPI 执行器统一进工作流前端。"],
|
||||
["Studio", "Media OS", "生图助手、短视频工厂、数字人和工作空间共享模型资产与产出归档。"],
|
||||
];
|
||||
|
||||
const routeRows = [
|
||||
["chat", "gpt-5.5", "reasoning"],
|
||||
["image", "gpt-image-2", "archive"],
|
||||
["video", "Comfy API", "queue"],
|
||||
["voice", "tts", "timeline"],
|
||||
];
|
||||
|
||||
const stackItems = [
|
||||
"API aggregation",
|
||||
"Token billing",
|
||||
"Model marketplace",
|
||||
"Workspace archive",
|
||||
"Comfy workflow",
|
||||
"User self-service",
|
||||
];
|
||||
|
||||
const proofItems = [
|
||||
["01", "用户调用", "下游 API Key 或创作应用发起请求。"],
|
||||
["02", "模型路由", "系统选择健康、可用、成本合理的账号通道。"],
|
||||
["03", "生产归档", "图片、视频、音频和日志进入用户工作空间。"],
|
||||
];
|
||||
|
||||
export default function NewWebsiteExperiment() {
|
||||
return (
|
||||
<main className="new-acid-page">
|
||||
<AcidThreeField />
|
||||
<div className="new-acid-noise" aria-hidden="true" />
|
||||
<header className="new-acid-nav" aria-label="BossAI 实验页导航">
|
||||
<Link className="new-acid-brand" href="/" aria-label="BossAI 首页">
|
||||
<Image src="/logo.png" width={40} height={40} alt="" priority />
|
||||
<span>BossAI</span>
|
||||
</Link>
|
||||
<nav aria-label="实验页锚点导航">
|
||||
<a href="#gateway">Gateway</a>
|
||||
<a href="#workflow">Workflow</a>
|
||||
<a href="#studio">Studio</a>
|
||||
</nav>
|
||||
<Link className="new-acid-console-link" href="/user/register">
|
||||
开始使用
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<section className="new-acid-hero">
|
||||
<div className="new-acid-hero-copy">
|
||||
<div className="new-acid-kicker">
|
||||
<span />
|
||||
EXPERIMENTAL WEBSITE ROUTE / NEW
|
||||
</div>
|
||||
<h1>
|
||||
BoosAPI
|
||||
<span>acid control plane</span>
|
||||
</h1>
|
||||
<p>
|
||||
统一 API 网关、智能模型路由、Comfy 工作流和创作生产平台，被压缩成一个可以运营、可以计费、可以归档的 BossAI 系统。
|
||||
</p>
|
||||
<div className="new-acid-actions">
|
||||
<Link className="new-acid-primary" href="/user/register">
|
||||
创建用户工作台
|
||||
</Link>
|
||||
<Link className="new-acid-secondary" href="/boos">
|
||||
进入控制台
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="new-acid-router" aria-label="BossAI 路由演示">
|
||||
<div className="new-acid-router-top">
|
||||
<span>Live mesh</span>
|
||||
<strong>route: healthy</strong>
|
||||
</div>
|
||||
<div className="new-acid-router-core">
|
||||
<div>
|
||||
<span>API</span>
|
||||
<strong>/v1</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Cost</span>
|
||||
<strong>ledger</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Output</span>
|
||||
<strong>workspace</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="new-acid-route-list">
|
||||
{routeRows.map(([type, model, state]) => (
|
||||
<div key={type}>
|
||||
<span>{type}</span>
|
||||
<strong>{model}</strong>
|
||||
<em>{state}</em>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gateway" className="new-acid-signal-grid">
|
||||
{signalCards.map(([label, value, body]) => (
|
||||
<article key={label}>
|
||||
<div>
|
||||
<span>{label}</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
<p>{body}</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section id="workflow" className="new-acid-band">
|
||||
<div>
|
||||
<span>Workflow Field</span>
|
||||
<h2>把 Comfy API、模型路由和用户余额放进同一条生产链路</h2>
|
||||
</div>
|
||||
<div className="new-acid-stack">
|
||||
{stackItems.map((item) => (
|
||||
<span key={item}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="studio" className="new-acid-proof">
|
||||
<div className="new-acid-proof-copy">
|
||||
<span>Creation Loop</span>
|
||||
<h2>从调用到产出，每一步都有日志、成本和归档位置</h2>
|
||||
<p>
|
||||
这不是另一个单点工具。BossAI 把 API 聚合、用户自助工作台和创作生产平台接在同一套后台里，让团队能真正运营多模型多模态能力。
|
||||
</p>
|
||||
</div>
|
||||
<div className="new-acid-proof-steps">
|
||||
{proofItems.map(([step, title, body]) => (
|
||||
<article key={step}>
|
||||
<span>{step}</span>
|
||||
<strong>{title}</strong>
|
||||
<p>{body}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="new-acid-final">
|
||||
<h2>同一个 BoosAPI 内核，另一种官网表达。</h2>
|
||||
<div className="new-acid-actions">
|
||||
<Link className="new-acid-primary" href="/">
|
||||
返回当前官网
|
||||
</Link>
|
||||
<Link className="new-acid-secondary" href="/user/login">
|
||||
用户登录
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+18
-38
@@ -211,37 +211,15 @@ const controlSignals = [
|
||||
"工作空间归档",
|
||||
];
|
||||
|
||||
const bootLines = [
|
||||
"初始化统一模型网关",
|
||||
"加载 Claude Messages 与 OpenAI 兼容入口",
|
||||
"同步 Comfy Cloud / RunningHub 工作流后端",
|
||||
"准备日志、计费和工作空间归档",
|
||||
];
|
||||
|
||||
function BootScreen() {
|
||||
return (
|
||||
<div className="boot-screen" aria-hidden="true">
|
||||
<div className="boot-frame">
|
||||
<div className="boot-brand">
|
||||
<span className="boot-mark" />
|
||||
<strong>BossAI</strong>
|
||||
</div>
|
||||
<div className="boot-rule" />
|
||||
<div className="boot-lines">
|
||||
{bootLines.map((line) => (
|
||||
<p key={line}>
|
||||
<span />
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="boot-progress">
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const navItems = [
|
||||
["platform", "平台能力"],
|
||||
["studio", "生产线"],
|
||||
["api", "API"],
|
||||
["workflow", "工作流"],
|
||||
["operations", "运营"],
|
||||
["factory", "创作"],
|
||||
["deploy", "部署"],
|
||||
] as const;
|
||||
|
||||
function HeroSystemStrip() {
|
||||
return (
|
||||
@@ -360,7 +338,6 @@ export default function Home() {
|
||||
return (
|
||||
<BossAiMotion>
|
||||
<main className="site-shell">
|
||||
<BootScreen />
|
||||
<div className="site-noise" aria-hidden="true" />
|
||||
<header className="site-nav" data-motion="nav">
|
||||
<Link className="brand-mark" href="/" aria-label="BossAI 首页">
|
||||
@@ -368,11 +345,9 @@ export default function Home() {
|
||||
<span>BossAI</span>
|
||||
</Link>
|
||||
<nav className="nav-links" aria-label="官网导航">
|
||||
<a href="#platform">平台能力</a>
|
||||
<a href="#api">API</a>
|
||||
<a href="#workflow">工作流</a>
|
||||
<a href="#operations">运营</a>
|
||||
<a href="#deploy">部署</a>
|
||||
{navItems.map(([id, label]) => (
|
||||
<a href={`#${id}`} key={id}>{label}</a>
|
||||
))}
|
||||
</nav>
|
||||
<div className="nav-actions">
|
||||
<Link className="ghost-link" href="/user/login">
|
||||
@@ -383,6 +358,11 @@ export default function Home() {
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
<nav className="mobile-nav-rail" aria-label="官网移动导航" data-motion="mobile-nav">
|
||||
{navItems.map(([id, label]) => (
|
||||
<a href={`#${id}`} key={id}>{label}</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<section className="hero-section">
|
||||
<div className="hero-copy" data-motion="hero-copy">
|
||||
@@ -449,7 +429,7 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="studio-section" data-motion="section">
|
||||
<section id="studio" className="studio-section" data-motion="section">
|
||||
<div className="studio-copy">
|
||||
<span>Operating System</span>
|
||||
<h2>从模型供应到内容产出，形成一条能运营的生产线</h2>
|
||||
|
||||
Reference in New Issue
Block a user