Nvidia/BossAI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make website boot animation resilient

Browse Source
This commit is contained in:
boos
2026-06-06 22:38:31 +08:00
parent 16162095f7
commit f3d2d50f9a
2 changed files with 184 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/BossAiMotion.tsx
+108 -85
View File
@@ -26,95 +26,109 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
return;
}
root.classList.add("motion-enhanced");
gsap.set("[data-motion]", { autoAlpha: 1 });
gsap.set("[data-motion-line]", { transformOrigin: "center" });
const bootScreen = root.querySelector<HTMLElement>(".boot-screen");
const completeBoot = () => {
bootScreen?.classList.add("boot-screen-done");
};
const bootFailSafe = window.setTimeout(completeBoot, 4600);
const matchMedia = gsap.matchMedia();
try {
root.classList.add("motion-enhanced");
gsap.set("[data-motion]", { autoAlpha: 1 });
gsap.set("[data-motion-line]", { transformOrigin: "center" });
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line], .boot-screen", {
autoAlpha: 1,
clearProps: "transform",
});
gsap.set(".boot-screen", { display: "none" });
});
const matchMedia = gsap.matchMedia();
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",
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", {
autoAlpha: 1,
clearProps: "transform",
});
gsap.set(".boot-screen", { display: "none" });
completeBoot();
});
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase } });
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" });
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]", {
autoAlpha: 1,
clearProps: "transform",
});
gsap.to("[data-motion-dot]", {
scale: 1.14,
autoAlpha: 0.76,
duration: 1.4,
ease: "sine.inOut",
repeat: -1,
yoyo: true,
stagger: 0.2,
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase } });
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);
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,
});
});
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)", () => {
root.classList.add("motion-ready");
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
const splitTitle = heroTitle
? SplitText.create(heroTitle, {
type: "words",
aria: "auto",
wordsClass: "hero-word",
})
: null;
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, {
type: "words",
aria: "auto",
wordsClass: "hero-word",
})
: null;
const intro = gsap.timeline({ defaults: { ease: bossEase } });
intro
.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" })
.from("[data-motion='nav']", { y: -14, duration: 0.7 })
.from(".section-kicker", { y: 14, duration: 0.56 }, "-=0.18")
.from(
splitTitle?.words ?? ".hero-copy h1",
{
yPercent: 18,
rotateX: -6,
transformOrigin: "50% 100%",
duration: 0.82,
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");
const intro = gsap.timeline({ defaults: { ease: bossEase } });
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(
splitTitle?.words ?? ".hero-copy h1",
{
yPercent: 18,
rotateX: -6,
transformOrigin: "50% 100%",
duration: 0.82,
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");
gsap.to("[data-motion-orbit]", {
rotate: 360,
@@ -265,12 +279,21 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
cleanupAnchors();
splitTitle?.revert();
};
});
});
return () => {
matchMedia.revert();
root.classList.remove("motion-enhanced");
};
return () => {
window.clearTimeout(bootFailSafe);
matchMedia.revert();
root.classList.remove("motion-enhanced", "motion-ready");
};
} catch (error) {
console.warn("BossAI motion setup failed; using CSS boot fallback.", error);
root.classList.remove("motion-enhanced", "motion-ready");
return () => {
window.clearTimeout(bootFailSafe);
};
}
},
{ scope: scopeRef },
);
website/app/globals.css
+76 -8
View File
@@ -241,11 +241,22 @@ a {
pointer-events: none;
background: var(--boot-bg);
backdrop-filter: blur(14px);
animation: boot-screen-fallback 3.2s 0.25s ease forwards;
opacity: 1;
visibility: visible;
animation: boot-screen-fallback 3.6s 0.25s ease forwards;
will-change: opacity, visibility;
}
.boot-screen.boot-screen-done {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
animation: none !important;
}
.boot-frame {
position: relative;
z-index: 1;
width: min(720px, calc(100% - 28px));
min-height: 290px;
display: grid;
@@ -256,6 +267,9 @@ a {
background: var(--boot-frame-bg);
padding: clamp(24px, 4vw, 34px);
box-shadow: var(--boot-shadow);
opacity: 0;
transform: translateY(14px) scale(0.985);
animation: boot-frame-fallback 0.58s 0.08s cubic-bezier(0.18, 0.84, 0.32, 1) both;
}
.boot-frame::before,
@@ -285,6 +299,9 @@ a {
font-size: 22px;
font-weight: 860;
letter-spacing: -0.03em;
opacity: 0;
transform: translateY(6px);
animation: boot-item-fallback 0.42s 0.18s ease both;
}
.boot-mark {
@@ -303,7 +320,7 @@ a {
height: 1px;
background: var(--boot-rule-line);
transform-origin: left center;
animation: boot-rule-fallback 0.72s ease both;
animation: boot-rule-fallback 0.72s 0.28s ease both;
}
.boot-lines {
@@ -319,6 +336,25 @@ a {
color: var(--muted);
font-family: var(--font-geist-mono), monospace;
font-size: 12px;
opacity: 0;
transform: translateY(6px);
animation: boot-item-fallback 0.38s ease both;
}
.boot-lines p:nth-child(1) {
animation-delay: 0.42s;
}
.boot-lines p:nth-child(2) {
animation-delay: 0.5s;
}
.boot-lines p:nth-child(3) {
animation-delay: 0.58s;
}
.boot-lines p:nth-child(4) {
animation-delay: 0.66s;
}
.boot-lines p span {
@@ -346,17 +382,27 @@ a {
height: 100%;
background: linear-gradient(90deg, var(--acid), var(--blue));
transform-origin: left center;
animation: boot-rule-fallback 1.2s 0.32s ease both;
animation: boot-rule-fallback 1.32s 0.74s ease both;
}
.motion-root.motion-enhanced .boot-screen,
.motion-root.motion-enhanced .boot-rule,
.motion-root.motion-enhanced .boot-progress span {
.motion-root.motion-enhanced.motion-ready .boot-screen,
.motion-root.motion-enhanced.motion-ready .boot-frame,
.motion-root.motion-enhanced.motion-ready .boot-brand,
.motion-root.motion-enhanced.motion-ready .boot-lines p,
.motion-root.motion-enhanced.motion-ready .boot-rule,
.motion-root.motion-enhanced.motion-ready .boot-progress span {
animation: none;
}
.motion-root.motion-enhanced .boot-rule,
.motion-root.motion-enhanced .boot-progress span {
.motion-root.motion-enhanced.motion-ready .boot-frame,
.motion-root.motion-enhanced.motion-ready .boot-brand,
.motion-root.motion-enhanced.motion-ready .boot-lines p {
opacity: 1;
transform: none;
}
.motion-root.motion-enhanced.motion-ready .boot-rule,
.motion-root.motion-enhanced.motion-ready .boot-progress span {
transform: scaleX(0);
}
@@ -2236,6 +2282,28 @@ a {
}
}
@keyframes boot-frame-fallback {
from {
opacity: 0;
transform: translateY(14px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes boot-item-fallback {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes boot-rule-fallback {
from {
transform: scaleX(0);