lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intro updates

Browse Source
This commit is contained in:
Dorian
2026-05-10 15:29:46 +01:00
parent 068d333c8a
commit 97005f1959
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -1908,7 +1908,9 @@ async function playIntro() {
const span = document.createElement('span')
const isBold = i >= boldFromIdx || (emphasisRe && emphasisRe.test(stripPunct(word)))
span.className = 'word' + (isBold ? ' bold' : '')
span.style.animationDelay = (BASE + i * STAGGER) + 's'
const delay = (BASE + i * STAGGER) + 's'
span.style.animationDelay = delay
span.style.setProperty('--word-delay', delay)
span.textContent = word
textEl.appendChild(span)
// Stage 2 — insert a mobile-only line break after the leading

14
src/styles.css
View File

@@ -193,6 +193,9 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
body:not(.intro-done) .page-bg-pattern .bg-row {
opacity: 1;
}
body:not(.intro-done) .page-bg-pattern {
animation: introPatternFade 0.9s ease both;
}
body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(odd) {
animation: bgRowDriftLeft 14s ease-in-out infinite;
}
@@ -235,6 +238,10 @@ body:not(.intro-done) .page-bg-pattern .bg-row {
from { opacity: 0; transform: translateX(160px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes introPatternFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* (Per-page bg override removed — every page now uses #FAFAFA.) */
@@ -1307,11 +1314,11 @@ input[type=range]::-moz-range-thumb {
/* Stage 1 — the shield border appears first; the filled check ticks in
near the end of the sentence, after "prepare" has landed. */
.intro-stage.stage-1.active .i-shield-outline {
animation: introDraw 0.78s 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
animation: introDraw 0.78s 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
opacity: 1;
}
.intro-stage.stage-1.active .i-secure-tick {
animation: tickFillIn 0.48s 2.35s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
animation: tickFillIn 0.48s 2.6s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
transform-box: fill-box;
transform-origin: center;
}
@@ -1428,6 +1435,9 @@ input[type=range]::-moz-range-thumb {
.intro-stage.active .intro-text > .word {
animation: introWord 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.intro-stage.stage-1.active .intro-text > .word {
animation-delay: calc(var(--word-delay, 0s) + 0.9s) !important;
}
@keyframes introWord {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }