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

feat: refine BoosAPI console and user workspace

Browse Source
This commit is contained in:
boos
2026-06-09 16:48:18 +08:00
parent aaba6f152e
commit 59106e6a96
284 changed files with 59886 additions and 5594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/BossAiMotion.tsx
+169 -77
View File
@@ -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);
};
});