fix: make website boot animation resilient
This commit is contained in:
boos
+108
-85
@@ -26,95 +26,109 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
root.classList.add("motion-enhanced");
|
const bootScreen = root.querySelector<HTMLElement>(".boot-screen");
|
||||||
gsap.set("[data-motion]", { autoAlpha: 1 });
|
const completeBoot = () => {
|
||||||
gsap.set("[data-motion-line]", { transformOrigin: "center" });
|
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)", () => {
|
const matchMedia = gsap.matchMedia();
|
||||||
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" });
|
|
||||||
});
|
|
||||||
|
|
||||||
matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
|
matchMedia.add("(prefers-reduced-motion: reduce)", () => {
|
||||||
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
|
root.classList.add("motion-ready");
|
||||||
autoAlpha: 1,
|
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line], .boot-screen", {
|
||||||
clearProps: "transform",
|
autoAlpha: 1,
|
||||||
|
clearProps: "transform",
|
||||||
|
});
|
||||||
|
gsap.set(".boot-screen", { display: "none" });
|
||||||
|
completeBoot();
|
||||||
});
|
});
|
||||||
|
|
||||||
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase } });
|
matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
|
||||||
mobileIntro
|
root.classList.add("motion-ready");
|
||||||
.set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
|
gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
|
||||||
.from(".boot-frame", { y: 12, scale: 0.99, duration: 0.28, ease: "power3.out" })
|
autoAlpha: 1,
|
||||||
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.34, transformOrigin: "left center" }, "-=0.08")
|
clearProps: "transform",
|
||||||
.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]", {
|
const mobileIntro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||||
scale: 1.14,
|
mobileIntro
|
||||||
autoAlpha: 0.76,
|
.set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
|
||||||
duration: 1.4,
|
.from(".boot-frame", { y: 12, scale: 0.99, duration: 0.28, ease: "power3.out" })
|
||||||
ease: "sine.inOut",
|
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.34, transformOrigin: "left center" }, "-=0.08")
|
||||||
repeat: -1,
|
.fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.5, transformOrigin: "left center" }, "-=0.04")
|
||||||
yoyo: true,
|
.to(".boot-screen", { autoAlpha: 0, yPercent: -2, duration: 0.34, ease: "power3.inOut", delay: 0.06 })
|
||||||
stagger: 0.2,
|
.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]", {
|
matchMedia.add("(prefers-reduced-motion: no-preference) and (min-width: 641px)", () => {
|
||||||
strokeDashoffset: -120,
|
root.classList.add("motion-ready");
|
||||||
duration: 6,
|
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
|
||||||
ease: "none",
|
const splitTitle = heroTitle
|
||||||
repeat: -1,
|
? SplitText.create(heroTitle, {
|
||||||
stagger: 0.24,
|
type: "words",
|
||||||
});
|
aria: "auto",
|
||||||
});
|
wordsClass: "hero-word",
|
||||||
|
})
|
||||||
|
: null;
|
||||||
|
|
||||||
matchMedia.add("(prefers-reduced-motion: no-preference) and (min-width: 641px)", () => {
|
const intro = gsap.timeline({ defaults: { ease: bossEase } });
|
||||||
const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
|
intro
|
||||||
const splitTitle = heroTitle
|
.set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
|
||||||
? SplitText.create(heroTitle, {
|
.from(".boot-frame", { y: 20, scale: 0.985, duration: 0.42, ease: "power3.out" })
|
||||||
type: "words",
|
.from(".boot-mark", { scale: 0.72, rotate: -16, duration: 0.36 }, "-=0.18")
|
||||||
aria: "auto",
|
.from(".boot-brand strong", { x: -8, duration: 0.32 }, "-=0.24")
|
||||||
wordsClass: "hero-word",
|
.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")
|
||||||
: null;
|
.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 })
|
||||||
const intro = gsap.timeline({ defaults: { ease: bossEase } });
|
.set(".boot-screen", { display: "none" })
|
||||||
intro
|
.call(completeBoot)
|
||||||
.from(".boot-frame", { y: 20, scale: 0.985, duration: 0.42, ease: "power3.out" })
|
.from("[data-motion='nav']", { y: -14, duration: 0.7 })
|
||||||
.from(".boot-mark", { scale: 0.72, rotate: -16, duration: 0.36 }, "-=0.18")
|
.from(".section-kicker", { y: 14, duration: 0.56 }, "-=0.18")
|
||||||
.from(".boot-brand strong", { x: -8, duration: 0.32 }, "-=0.24")
|
.from(
|
||||||
.fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.56, transformOrigin: "left center" }, "-=0.12")
|
splitTitle?.words ?? ".hero-copy h1",
|
||||||
.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")
|
yPercent: 18,
|
||||||
.to(".boot-screen", { autoAlpha: 0, yPercent: -4, duration: 0.62, ease: "power3.inOut", delay: 0.08 })
|
rotateX: -6,
|
||||||
.set(".boot-screen", { display: "none" })
|
transformOrigin: "50% 100%",
|
||||||
.from("[data-motion='nav']", { y: -14, duration: 0.7 })
|
duration: 0.82,
|
||||||
.from(".section-kicker", { y: 14, duration: 0.56 }, "-=0.18")
|
stagger: { each: 0.035, from: "start" },
|
||||||
.from(
|
},
|
||||||
splitTitle?.words ?? ".hero-copy h1",
|
"-=0.28",
|
||||||
{
|
)
|
||||||
yPercent: 18,
|
.from(".hero-copy p", { y: 18, duration: 0.7 }, "-=0.5")
|
||||||
rotateX: -6,
|
.from("[data-motion='signal']", { y: 10, duration: 0.42, stagger: 0.06 }, "-=0.42")
|
||||||
transformOrigin: "50% 100%",
|
.from(".hero-actions > *", { y: 12, duration: 0.46, stagger: 0.08 }, "-=0.42")
|
||||||
duration: 0.82,
|
.from(".hero-proof > div", { y: 12, duration: 0.5, stagger: 0.07 }, "-=0.28")
|
||||||
stagger: { each: 0.035, from: "start" },
|
.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")
|
||||||
"-=0.28",
|
.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");
|
||||||
.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]", {
|
gsap.to("[data-motion-orbit]", {
|
||||||
rotate: 360,
|
rotate: 360,
|
||||||
@@ -265,12 +279,21 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
|||||||
cleanupAnchors();
|
cleanupAnchors();
|
||||||
splitTitle?.revert();
|
splitTitle?.revert();
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
matchMedia.revert();
|
window.clearTimeout(bootFailSafe);
|
||||||
root.classList.remove("motion-enhanced");
|
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 },
|
{ scope: scopeRef },
|
||||||
);
|
);
|
||||||
|
|||||||
+76
-8
@@ -241,11 +241,22 @@ a {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: var(--boot-bg);
|
background: var(--boot-bg);
|
||||||
backdrop-filter: blur(14px);
|
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 {
|
.boot-frame {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: min(720px, calc(100% - 28px));
|
width: min(720px, calc(100% - 28px));
|
||||||
min-height: 290px;
|
min-height: 290px;
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -256,6 +267,9 @@ a {
|
|||||||
background: var(--boot-frame-bg);
|
background: var(--boot-frame-bg);
|
||||||
padding: clamp(24px, 4vw, 34px);
|
padding: clamp(24px, 4vw, 34px);
|
||||||
box-shadow: var(--boot-shadow);
|
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,
|
.boot-frame::before,
|
||||||
@@ -285,6 +299,9 @@ a {
|
|||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 860;
|
font-weight: 860;
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(6px);
|
||||||
|
animation: boot-item-fallback 0.42s 0.18s ease both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boot-mark {
|
.boot-mark {
|
||||||
@@ -303,7 +320,7 @@ a {
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
background: var(--boot-rule-line);
|
background: var(--boot-rule-line);
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
animation: boot-rule-fallback 0.72s ease both;
|
animation: boot-rule-fallback 0.72s 0.28s ease both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boot-lines {
|
.boot-lines {
|
||||||
@@ -319,6 +336,25 @@ a {
|
|||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-family: var(--font-geist-mono), monospace;
|
font-family: var(--font-geist-mono), monospace;
|
||||||
font-size: 12px;
|
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 {
|
.boot-lines p span {
|
||||||
@@ -346,17 +382,27 @@ a {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(90deg, var(--acid), var(--blue));
|
background: linear-gradient(90deg, var(--acid), var(--blue));
|
||||||
transform-origin: left center;
|
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.motion-ready .boot-screen,
|
||||||
.motion-root.motion-enhanced .boot-rule,
|
.motion-root.motion-enhanced.motion-ready .boot-frame,
|
||||||
.motion-root.motion-enhanced .boot-progress span {
|
.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;
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.motion-root.motion-enhanced .boot-rule,
|
.motion-root.motion-enhanced.motion-ready .boot-frame,
|
||||||
.motion-root.motion-enhanced .boot-progress span {
|
.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);
|
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 {
|
@keyframes boot-rule-fallback {
|
||||||
from {
|
from {
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
|
|||||||
Reference in New Issue
Block a user