svefnz/lumenshaders
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix startup freeze on weak devices and add Vercel Analytics

Browse Source 
Defer WebGL shader compile behind a visible boot placeholder, lower initial DPR, disable glass blur during boot, and lighten the intro so the page stays responsive instead of looking half-loaded.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Leonxlnx
2026-06-11 16:44:59 +02:00
parent 458cac66b7
commit b1de6a8e56
5 changed files with 177 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+57 -5
View File
@@ -189,6 +189,38 @@ button { font: inherit; color: inherit; cursor: pointer; background: none; borde
min-height: 0;
}
.canvas-shell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
}
.canvas-boot {
position: absolute;
border-radius: var(--radius-l);
background:
linear-gradient(135deg, #120804 0%, #3d1204 38%, #ff6a00 72%, #ffb347 100%);
background-size: 220% 220%;
animation: boot-shimmer 2.2s ease-in-out infinite;
box-shadow:
0 0 0 1px rgba(255,255,255,0.07),
inset 0 1px 0 rgba(255,255,255,0.08),
0 30px 80px -20px rgba(0,0,0,0.9),
0 8px 26px -10px rgba(0,0,0,0.65);
transition: opacity 0.45s ease;
pointer-events: none;
}
@keyframes boot-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
body.ready .canvas-boot { opacity: 0; }
#view {
max-width: 100%;
max-height: 100%;
@@ -199,8 +231,12 @@ button { font: inherit; color: inherit; cursor: pointer; background: none; borde
0 30px 80px -20px rgba(0,0,0,0.9),
0 8px 26px -10px rgba(0,0,0,0.65);
background: #000;
opacity: 0;
transition: opacity 0.45s ease;
}
body.ready #view { opacity: 1; }
.stage-meta {
display: flex;
align-items: center;
@@ -818,19 +854,35 @@ select { cursor: pointer; appearance: none; padding-right: 22px;
border-radius: 5px;
}
/* ---------- boot: keep shell visible, defer heavy glass ---------- */
body.booting .topbar,
body.booting .rail {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.booting .topbar { background: var(--bg); }
body.booting .rail {
opacity: 0;
pointer-events: none;
}
body.ready .rail {
opacity: 1;
pointer-events: auto;
transition: opacity 0.35s ease;
}
/* ---------- intro stagger animation ---------- */
@keyframes intro-pop {
0% { opacity: 0; transform: scale(1.45) translateY(-4px); }
62% { opacity: 1; }
0% { opacity: 0; transform: scale(1.1) translateY(6px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.intro .stagger-item {
animation: intro-pop 560ms cubic-bezier(.22,1.3,.36,1) both;
animation: intro-pop 420ms cubic-bezier(.22,1,.36,1) both;
animation-delay: var(--intro-d, 0ms);
will-change: transform, opacity;
}
.intro .canvas-frame.stagger-item { animation-duration: 780ms; }
.intro .canvas-shell.stagger-item { animation-duration: 520ms; }
/* ---------- download success effect ---------- */