xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: trim the interlude to about 1.5 s

Browse Source
This commit is contained in:
LucaP
2026-10-11 00:43:25 +03:00
parent fc897e534c
commit c8bc75cdcc
5 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/styles/gantry.css
View File

@@ -708,45 +708,47 @@ html .drive-controls__audio-status {
/* ---------- The interlude under the gantry ---------- */
/* While a sign approaches (environment.ts sets data-interlude='on'), the
reading plates step up and out in 260 ms, so the road and the sign have
the frame to themselves; then ('rise') they come back up from below in
sequence. Headings only fade: journey and audio measure them. */
reading plates step up and out in 180 ms, so the road and the sign have
the frame to themselves; the headings follow once the plates are gone, so
a departing plate never ghosts over an arriving title. Then ('rise', about
180 ms before the sign docks) they come back up from below in sequence.
Headings only fade: journey and audio measure them. */
@media (prefers-reduced-motion: no-preference) {
html[data-interlude='on'] .reading-stage .portfolio-main > * > * {
opacity: 0;
transition: opacity 260ms cubic-bezier(0.5, 0, 0.75, 0);
transition: opacity 200ms cubic-bezier(0.5, 0, 0.75, 0) 160ms;
}
html[data-interlude='on'] .reading-stage .portfolio-main > * > :not(h1, h2, :has(h1, h2)) {
transform: translateY(-24px);
transition:
opacity 260ms cubic-bezier(0.5, 0, 0.75, 0),
transform 260ms cubic-bezier(0.5, 0, 0.75, 0);
opacity 180ms cubic-bezier(0.5, 0, 0.75, 0),
transform 180ms cubic-bezier(0.5, 0, 0.75, 0);
}
/* The exit tag's strike-on animation restarts as the plates return. */
html[data-interlude='on'] .reading-stage .portfolio-section::before,
html[data-interlude='on'] .reading-stage .portfolio-section[data-exit='08']::after {
opacity: 0;
animation: none;
transition: opacity 260ms cubic-bezier(0.5, 0, 0.75, 0);
transition: opacity 180ms cubic-bezier(0.5, 0, 0.75, 0);
}
html[data-interlude='rise'] .reading-stage .portfolio-section[data-exit='08']::after,
html[data-interlude='rise'] .reading-stage .portfolio-main > .portfolio-section > *,
html[data-interlude='rise'] .reading-stage .portfolio-main > .hero-journey > * {
animation: plate-fade 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation: plate-fade 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-interlude='rise'] .reading-stage .portfolio-main > .portfolio-section > :not(h1, h2, :has(h1, h2)),
html[data-interlude='rise'] .reading-stage .portfolio-main > .hero-journey > :not(h1, h2, :has(h1, h2)) {
animation: plate-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation: plate-rise 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* The chapter body keeps its light-edge sweep alongside the rise. */
html[data-interlude='rise'] .reading-stage .portfolio-main > .portfolio-section[data-current] > .chapter-body {
animation:
plate-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both,
plate-rise 400ms cubic-bezier(0.22, 1, 0.36, 1) both,
exit-panel-light 1.6s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
html[data-interlude='rise'] .reading-stage .portfolio-main > * > :nth-child(2) { animation-delay: 90ms; }
html[data-interlude='rise'] .reading-stage .portfolio-main > * > :nth-child(3) { animation-delay: 180ms; }
html[data-interlude='rise'] .reading-stage .portfolio-main > * > :nth-child(n + 4) { animation-delay: 270ms; }
html[data-interlude='rise'] .reading-stage .portfolio-main > * > :nth-child(2) { animation-delay: 40ms; }
html[data-interlude='rise'] .reading-stage .portfolio-main > * > :nth-child(3) { animation-delay: 80ms; }
html[data-interlude='rise'] .reading-stage .portfolio-main > * > :nth-child(n + 4) { animation-delay: 120ms; }
}
@keyframes plate-rise {
from { opacity: 0; transform: translateY(28px); }