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());
}