fix: make website boot animation resilient
This commit is contained in:
boos
+108
-85
@@ -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 },
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user