fix: make website boot animation resilient
This commit is contained in:
boos
@@ -26,6 +26,13 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bootScreen = root.querySelector<HTMLElement>(".boot-screen");
|
||||
const completeBoot = () => {
|
||||
bootScreen?.classList.add("boot-screen-done");
|
||||
};
|
||||
const bootFailSafe = window.setTimeout(completeBoot, 4600);
|
||||
|
||||
try {
|
||||
root.classList.add("motion-enhanced");
|
||||
gsap.set("[data-motion]", { autoAlpha: 1 });
|
||||
gsap.set("[data-motion-line]", { transformOrigin: "center" });
|
||||
@@ -33,14 +40,17 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
const matchMedia = gsap.matchMedia();
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
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",
|
||||
@@ -53,7 +63,8 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
.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" });
|
||||
.set(".boot-screen", { display: "none" })
|
||||
.call(completeBoot);
|
||||
|
||||
gsap.to("[data-motion-dot]", {
|
||||
scale: 1.14,
|
||||
@@ -75,6 +86,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
});
|
||||
|
||||
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, {
|
||||
@@ -86,6 +98,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
|
||||
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")
|
||||
@@ -94,6 +107,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
.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(
|
||||
@@ -268,9 +282,18 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(bootFailSafe);
|
||||
matchMedia.revert();
|
||||
root.classList.remove("motion-enhanced");
|
||||
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 },
|
||||
);
|
||||
|
||||
+76
-8
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user