fix: stabilize website boot loader

This commit is contained in:
boos
2026-06-06 21:54:25 +08:00
parent 3b3292b934
commit d7d14e077e
2 changed files with 25 additions and 2 deletions
+14 -2
View File
@@ -26,6 +26,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
return; return;
} }
root.classList.add("motion-enhanced");
gsap.set("[data-motion]", { autoAlpha: 1 }); gsap.set("[data-motion]", { autoAlpha: 1 });
gsap.set("[data-motion-line]", { transformOrigin: "center" }); gsap.set("[data-motion-line]", { transformOrigin: "center" });
@@ -44,7 +45,15 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
autoAlpha: 1, autoAlpha: 1,
clearProps: "transform", clearProps: "transform",
}); });
gsap.set(".boot-screen", { display: "none" });
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" });
gsap.to("[data-motion-dot]", { gsap.to("[data-motion-dot]", {
scale: 1.14, scale: 1.14,
@@ -258,7 +267,10 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
}; };
}); });
return () => matchMedia.revert(); return () => {
matchMedia.revert();
root.classList.remove("motion-enhanced");
};
}, },
{ scope: scopeRef }, { scope: scopeRef },
); );
+11
View File
@@ -349,6 +349,17 @@ a {
animation: boot-rule-fallback 1.2s 0.32s ease both; animation: boot-rule-fallback 1.2s 0.32s ease both;
} }
.motion-root.motion-enhanced .boot-screen,
.motion-root.motion-enhanced .boot-rule,
.motion-root.motion-enhanced .boot-progress span {
animation: none;
}
.motion-root.motion-enhanced .boot-rule,
.motion-root.motion-enhanced .boot-progress span {
transform: scaleX(0);
}
.site-nav, .site-nav,
.hero-section, .hero-section,
.platform-section, .platform-section,