1
0
forked from boos/BoosAPI

feat: refine website gateway os hero

This commit is contained in:
boos
2026-06-06 18:59:10 +08:00
parent d5babf5f3f
commit 00b3365f5a
3 changed files with 276 additions and 2 deletions
+43 -1
View File
@@ -39,7 +39,33 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
gsap.set(".boot-screen", { display: "none" });
});
matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
autoAlpha: 1,
clearProps: "transform",
});
gsap.set(".boot-screen", { display: "none" });
gsap.to("[data-motion-dot]", {
scale: 1.14,
autoAlpha: 0.76,
duration: 1.4,
ease: "sine.inOut",
repeat: -1,
yoyo: true,
stagger: 0.2,
});
gsap.to("[data-motion-line]", {
strokeDashoffset: -120,
duration: 6,
ease: "none",
repeat: -1,
stagger: 0.24,
});
});
matchMedia.add("(prefers-reduced-motion: no-preference) and (min-width: 641px)", () => {
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
const splitTitle = heroTitle
? SplitText.create(heroTitle, {
@@ -73,9 +99,11 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
"-=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");
@@ -107,6 +135,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
const heroSection = root.querySelector<HTMLElement>(".hero-section");
const heroConsole = root.querySelector<HTMLElement>(".hero-console");
const routeRows = gsap.utils.toArray<HTMLElement>(".route-row", root);
const exchangeSteps = gsap.utils.toArray<HTMLElement>(".exchange-step", root);
const consoleTiles = gsap.utils.toArray<HTMLElement>(".console-metrics > div, .mini-grid > div", root);
if (heroSection && heroConsole) {
@@ -155,6 +184,19 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
},
});
gsap.to(exchangeSteps, {
y: (index) => -5 + index * 1.4,
autoAlpha: (index) => 0.98 - index * 0.02,
ease: "none",
stagger: { each: 0.035, from: "start" },
scrollTrigger: {
trigger: heroConsole,
start: "top 80%",
end: "center 18%",
scrub: true,
},
});
gsap.to(consoleTiles, {
y: -12,
autoAlpha: 0.9,