boos/BoosAPI
2
0
Fork 2
Code Issues Pull Requests 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/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);