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

feat: polish BossAI website motion

Browse Source
This commit is contained in:
boos
2026-06-06 14:56:33 +08:00
parent 4d748dd938
commit 49c398db5e
2 changed files with 295 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/BossAiMotion.tsx
+223 -62
View File
@@ -3,9 +3,14 @@
import { type ReactNode, useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { CustomEase } from "gsap/CustomEase";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(useGSAP, ScrollTrigger);
gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin, SplitText, CustomEase);
const bossEase = CustomEase.create("boss-ease", "M0,0 C0.18,0.84 0.32,1 1,1");
type BossAiMotionProps = {
children: ReactNode;
@@ -16,77 +21,129 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
useGSAP(
() => {
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const root = scopeRef.current;
if (!root) {
return;
}
gsap.set("[data-motion]", { autoAlpha: 1 });
gsap.set("[data-motion-line]", { transformOrigin: "center" });
if (reduceMotion) {
return;
}
const matchMedia = gsap.matchMedia();
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,
},
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
autoAlpha: 1,
clearProps: "transform",
});
});
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,
},
matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
const splitTitle = heroTitle
? SplitText.create(heroTitle, {
type: "words",
aria: "auto",
wordsClass: "hero-word",
})
: null;
const intro = gsap.timeline({ defaults: { ease: bossEase } });
intro
.from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
.from(".section-kicker", { autoAlpha: 0, y: 18, duration: 0.56 }, "-=0.18")
.from(
splitTitle?.words ?? ".hero-copy h1",
{
autoAlpha: 0,
yPercent: 92,
rotateX: -18,
transformOrigin: "50% 100%",
duration: 0.82,
stagger: { each: 0.035, from: "start" },
},
"-=0.28",
)
.from(".hero-copy p", { autoAlpha: 0, y: 22, duration: 0.7 }, "-=0.5")
.from(".hero-actions > *", { autoAlpha: 0, y: 14, duration: 0.46, stagger: 0.08 }, "-=0.42")
.from(".hero-proof > div", { autoAlpha: 0, y: 16, duration: 0.5, stagger: 0.07 }, "-=0.28")
.from("[data-motion='hero-console']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.78")
.from("[data-motion='route-row']", { autoAlpha: 0, x: 24, duration: 0.55, stagger: 0.08 }, "-=0.48")
.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.82,
ease: bossEase,
scrollTrigger: {
trigger: section,
start: "top 82%",
once: true,
},
});
});
gsap.utils
.toArray<HTMLElement>("[data-motion='card']")
.filter((card) => !card.closest(".hero-section"))
.forEach((card, index) => {
gsap.from(card, {
autoAlpha: 0,
y: 28,
scale: 0.97,
duration: 0.62,
delay: (index % 4) * 0.04,
ease: bossEase,
scrollTrigger: {
trigger: card,
start: "top 88%",
once: true,
},
});
});
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 () => matchMedia.revert();
},
{ scope: scopeRef },
);
@@ -97,3 +154,107 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
</div>
);
}
function setupSmoothAnchors(root: HTMLElement) {
const anchors = gsap.utils.toArray<HTMLAnchorElement>("a[href^='#']", root);
const cleanups = anchors.map((anchor) => {
const onClick = (event: MouseEvent) => {
const href = anchor.getAttribute("href");
const targetId = href?.slice(1);
const target = targetId ? document.getElementById(targetId) : null;
if (!href || !target) {
return;
}
event.preventDefault();
window.history.pushState(null, "", href);
gsap.to(window, {
duration: 0.92,
ease: bossEase,
overwrite: "auto",
scrollTo: { y: target, offsetY: 22 },
});
};
anchor.addEventListener("click", onClick);
return () => anchor.removeEventListener("click", onClick);
});
return () => cleanups.forEach((cleanup) => cleanup());
}
function setupActiveNavigation(root: HTMLElement) {
const links = gsap.utils.toArray<HTMLAnchorElement>(".nav-links a[href^='#']", root);
const linkById = new Map(
links
.map((link) => [link.getAttribute("href")?.slice(1), link] as const)
.filter((entry): entry is readonly [string, HTMLAnchorElement] => Boolean(entry[0])),
);
const setActive = (id: string) => {
links.forEach((link) => link.classList.toggle("is-active", linkById.get(id) === link));
};
const triggers = gsap.utils
.toArray<HTMLElement>("section[id]", root)
.filter((section) => linkById.has(section.id))
.map((section) =>
ScrollTrigger.create({
trigger: section,
start: "top 42%",
end: "bottom 42%",
onEnter: () => setActive(section.id),
onEnterBack: () => setActive(section.id),
}),
);
return () => {
triggers.forEach((trigger) => trigger.kill());
links.forEach((link) => link.classList.remove("is-active"));
};
}
function setupMagneticCards(root: HTMLElement) {
const cards = gsap.utils.toArray<HTMLElement>("[data-motion='card']", root);
const cleanups = cards.map((card) => {
const onPointerMove = (event: PointerEvent) => {
const rect = card.getBoundingClientRect();
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,
duration: 0.38,
ease: "power3.out",
overwrite: "auto",
});
};
const onPointerLeave = () => {
gsap.to(card, {
x: 0,
y: 0,
rotateX: 0,
rotateY: 0,
duration: 0.58,
ease: bossEase,
overwrite: "auto",
});
};
card.addEventListener("pointermove", onPointerMove);
card.addEventListener("pointerleave", onPointerLeave);
return () => {
card.removeEventListener("pointermove", onPointerMove);
card.removeEventListener("pointerleave", onPointerLeave);
};
});
return () => cleanups.forEach((cleanup) => cleanup());
}
website/app/globals.css
+72 -5
View File
@@ -63,6 +63,7 @@ a {
.motion-root {
min-height: 100dvh;
perspective: 1400px;
}
[data-motion],
@@ -165,12 +166,14 @@ a {
}
.nav-links a:hover,
.nav-links a:focus-visible {
.nav-links a:focus-visible,
.nav-links a.is-active {
color: var(--text);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
.nav-links a:focus-visible::after,
.nav-links a.is-active::after {
opacity: 0.8;
transform: scaleX(1);
}
@@ -183,6 +186,8 @@ a {
.solid-link,
.primary-cta,
.secondary-cta {
position: relative;
overflow: hidden;
min-height: 42px;
display: inline-flex;
align-items: center;
@@ -196,6 +201,17 @@ a {
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.solid-link::before,
.primary-cta::before {
position: absolute;
inset: -1px auto -1px -42%;
width: 38%;
content: "";
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
transform: skewX(-18deg);
transition: left 560ms ease;
}
.ghost-link,
.secondary-cta {
border-color: var(--line);
@@ -221,6 +237,13 @@ a {
transform: translateY(-2px);
}
.solid-link:hover::before,
.primary-cta:hover::before,
.solid-link:focus-visible::before,
.primary-cta:focus-visible::before {
left: 108%;
}
.ghost-link:hover,
.secondary-cta:hover,
.ghost-link:focus-visible,
@@ -274,6 +297,7 @@ a {
line-height: 0.9;
letter-spacing: -0.07em;
text-wrap: balance;
transform-style: preserve-3d;
}
.hero-copy h1 span {
@@ -281,6 +305,11 @@ a {
color: var(--acid);
}
.hero-word {
display: inline-block;
will-change: transform, opacity;
}
.hero-copy p {
max-width: 60ch;
margin: 0;
@@ -385,17 +414,32 @@ a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.route-row::before,
.console-bar::before {
width: 7px;
height: 7px;
border-radius: 999px;
content: "";
background: var(--acid);
box-shadow: 0 0 20px rgba(215, 255, 77, 0.55);
}
.console-bar {
position: relative;
z-index: 2;
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
justify-content: flex-start;
border-radius: 18px;
padding: 0 16px;
}
.console-bar strong {
margin-left: auto;
}
.console-bar span,
.route-row em,
.console-metrics span,
@@ -418,13 +462,21 @@ a {
}
.route-row {
position: relative;
min-height: 58px;
display: grid;
grid-template-columns: 78px 1fr auto;
align-items: center;
gap: 14px;
border-radius: 18px;
padding: 0 14px;
padding: 0 14px 0 32px;
}
.route-row::before {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
}
.route-row span {
@@ -437,6 +489,11 @@ a {
color: #ffec99;
}
.route-row[data-tone="hot"]::before {
background: #ffec99;
box-shadow: 0 0 20px rgba(255, 236, 153, 0.5);
}
.route-row[data-tone="lime"] span {
color: var(--acid);
}
@@ -445,6 +502,11 @@ a {
color: var(--blue);
}
.route-row[data-tone="blue"]::before {
background: var(--blue);
box-shadow: 0 0 20px rgba(139, 246, 255, 0.5);
}
.route-row strong,
.console-metrics strong,
.mini-grid strong,
@@ -542,6 +604,7 @@ a {
.deploy-section,
.final-section {
padding-block: 72px;
scroll-margin-top: 22px;
}
.section-heading {
@@ -644,7 +707,8 @@ a {
.endpoint-card,
.ops-card,
.module-strip span {
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
transform-style: preserve-3d;
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.capability-card:hover,
@@ -654,6 +718,9 @@ a {
transform: translateY(-3px);
border-color: var(--line-strong);
background-color: rgba(255, 255, 255, 0.045);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 22px 54px rgba(0, 0, 0, 0.2);
}
.api-section {