Skip to content

Commit 0c11309

Browse files
ModelizedModelized
authored
Website Update
1 parent aef598a commit 0c11309

3 files changed

Lines changed: 90 additions & 80 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
--home-next-layer-opacity: 0;
5454
--home-next-layer-shift: 18px;
5555
--home-next-layer-overlap: clamp(34rem, 68vh, 46rem);
56-
--site-atmosphere-opacity: 1;
56+
--site-atmosphere-opacity: 0;
5757
}
5858

5959
* {
@@ -63,7 +63,13 @@
6363
html {
6464
scroll-behavior: smooth;
6565
-webkit-text-size-adjust: 100%;
66-
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
66+
background-color: var(--bg);
67+
background-image:
68+
radial-gradient(78% 62% at 22% 24%, rgba(228, 129, 57, calc(0.18 * var(--site-atmosphere-opacity))) 0%, rgba(228, 129, 57, 0) 74%),
69+
radial-gradient(70% 56% at 79% 34%, rgba(72, 93, 212, calc(0.17 * var(--site-atmosphere-opacity))) 0%, rgba(72, 93, 212, 0) 76%),
70+
radial-gradient(86% 72% at 56% 100%, rgba(255, 255, 255, calc(0.01 * var(--site-atmosphere-opacity))) 0%, rgba(255, 255, 255, 0) 74%),
71+
linear-gradient(180deg, rgba(8, 8, 10, calc(0.13 * var(--site-atmosphere-opacity))) 0%, rgba(8, 8, 10, calc(0.05 * var(--site-atmosphere-opacity))) 42%, rgba(7, 7, 10, calc(0.2 * var(--site-atmosphere-opacity))) 100%),
72+
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
6773
color-scheme: dark;
6874
}
6975

@@ -75,33 +81,9 @@ body {
7581
position: relative;
7682
font-family: var(--body-font);
7783
color: var(--text);
78-
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
84+
background: transparent;
7985
overflow-x: hidden;
80-
background-color: var(--bg);
81-
}
82-
83-
body::before {
84-
content: "";
85-
position: fixed;
86-
top: calc(env(safe-area-inset-top, 0px) * -1 - 24px);
87-
right: 0;
88-
bottom: -24px;
89-
left: 0;
90-
z-index: 0;
91-
pointer-events: none;
92-
background:
93-
radial-gradient(78% 62% at 22% 24%, rgba(224, 124, 54, 0.17), rgba(224, 124, 54, 0) 74%),
94-
radial-gradient(70% 56% at 79% 34%, rgba(66, 88, 201, 0.16), rgba(66, 88, 201, 0) 76%),
95-
radial-gradient(86% 72% at 56% 100%, rgba(255, 255, 255, 0.008), rgba(255, 255, 255, 0) 74%),
96-
linear-gradient(180deg, rgba(6, 6, 8, 0.1) 0%, rgba(6, 6, 8, 0.035) 40%, rgba(6, 6, 8, 0.16) 100%);
97-
opacity: var(--site-atmosphere-opacity);
98-
will-change: opacity;
99-
transform: translateZ(0);
100-
backface-visibility: hidden;
101-
}
102-
103-
body.page-home {
104-
--site-atmosphere-opacity: 0;
86+
background-color: transparent;
10587
}
10688

10789
body.no-scroll {
@@ -1814,21 +1796,10 @@ body.page-home #about {
18141796
visibility: visible;
18151797
pointer-events: none;
18161798
transition:
1817-
opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
1799+
opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
18181800
visibility 0s linear 0s;
18191801
}
18201802

1821-
.stack-loading-overlay::before {
1822-
content: "";
1823-
position: absolute;
1824-
inset: -2px;
1825-
background:
1826-
linear-gradient(180deg, rgba(8, 8, 11, 0.97) 0%, rgba(7, 7, 10, 0.985) 100%);
1827-
backdrop-filter: blur(16px) saturate(0.76);
1828-
-webkit-backdrop-filter: blur(16px) saturate(0.76);
1829-
box-shadow: none;
1830-
}
1831-
18321803
.stack-loading-spinner {
18331804
position: relative;
18341805
z-index: 1;
@@ -1847,12 +1818,23 @@ body.page-home #about {
18471818
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
18481819
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
18491820
animation: stack-loading-spin 1080ms linear infinite;
1821+
opacity: 1;
1822+
transform: scale(1);
1823+
transition:
1824+
opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
1825+
transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
1826+
}
1827+
1828+
.discipline-stack-shell[data-stack-loading="settling"] .stack-loading-spinner,
1829+
.discipline-stack-shell[data-stack-loading="false"] .stack-loading-spinner {
1830+
opacity: 0;
1831+
transform: scale(0.92);
18501832
}
18511833

18521834
.discipline-stack-shell[data-stack-loading="false"] .stack-loading-overlay {
18531835
opacity: 0;
18541836
visibility: hidden;
1855-
transition-delay: 0s, 520ms;
1837+
transition-delay: 0s, 300ms;
18561838
}
18571839

18581840
@keyframes stack-loading-spin {
@@ -1875,7 +1857,8 @@ body.page-home #about {
18751857
visibility 0s linear 420ms;
18761858
}
18771859

1878-
.discipline-stack-shell[data-stack-loading="true"] .discipline-stack-viewport {
1860+
.discipline-stack-shell[data-stack-loading="true"] .discipline-stack-viewport,
1861+
.discipline-stack-shell[data-stack-loading="settling"] .discipline-stack-viewport {
18791862
opacity: 0;
18801863
visibility: hidden;
18811864
pointer-events: none;
@@ -1886,7 +1869,7 @@ body.page-home #about {
18861869
opacity: 1;
18871870
visibility: visible;
18881871
pointer-events: auto;
1889-
transition-delay: 120ms, 0s;
1872+
transition: none;
18901873
}
18911874

18921875
.discipline-stack-shell,
@@ -1910,7 +1893,7 @@ body.page-home #about {
19101893
box-shadow: none;
19111894
}
19121895

1913-
.js .discipline-stack-viewport:not([data-stack-ready="true"]) .discipline-stack-card {
1896+
.js .discipline-stack-viewport[data-stack-ready="false"] .discipline-stack-card {
19141897
opacity: 0 !important;
19151898
visibility: hidden !important;
19161899
transition: none !important;
@@ -1979,11 +1962,31 @@ body.page-home #about {
19791962
overflow: hidden;
19801963
transition:
19811964
transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
1982-
box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1);
1965+
box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
1966+
opacity 560ms cubic-bezier(0.18, 0.94, 0.24, 1);
19831967
transform: translateZ(0) scale(1);
19841968
backface-visibility: hidden;
19851969
}
19861970

1971+
.js .discipline-stack-viewport[data-stack-ready="revealing"] .discipline-stack-card__surface,
1972+
.js .discipline-stack-viewport[data-stack-ready="true"] .discipline-stack-card__surface {
1973+
opacity: 1;
1974+
transform: translate3d(0, 0, 0) scale(1);
1975+
}
1976+
1977+
.js .discipline-stack-viewport[data-stack-ready="revealing"] .discipline-stack-card__surface {
1978+
transition:
1979+
transform 720ms cubic-bezier(0.16, 0.96, 0.22, 1),
1980+
box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
1981+
opacity 520ms cubic-bezier(0.18, 0.94, 0.24, 1);
1982+
transition-delay: calc(var(--stack-reveal-order, 0) * 88ms);
1983+
}
1984+
1985+
.js .discipline-stack-viewport[data-stack-ready="false"] .discipline-stack-card__surface {
1986+
opacity: 0;
1987+
transform: translate3d(0, 20px, 0) scale(0.985);
1988+
}
1989+
19871990
.discipline-stack-card__surface::before {
19881991
content: none;
19891992
}

‎docs/assets/js/shell.js‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1254,6 +1254,7 @@
12541254
const lerp = (start, end, amount) => start + (end - start) * amount;
12551255
const linear = (value) => value;
12561256
const easeOutCubic = (value) => 1 - Math.pow(1 - value, 3);
1257+
const easeInOutSine = (value) => 0.5 - Math.cos(Math.PI * value) / 2;
12571258
const easeInOutCubic = (value) =>
12581259
value < 0.5
12591260
? 4 * value * value * value
@@ -1291,22 +1292,22 @@
12911292
stageReference * 1.78,
12921293
viewportHeight * 1.42
12931294
);
1294-
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.014, 6), 12);
1295+
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.015, 8), 14);
12951296
const lowerLayerOverlap = Math.max(
1296-
Math.min(viewportHeight * 1.02, stageReference * 1.26),
1297-
viewportHeight * 0.86
1297+
Math.min(transitionDistance + viewportHeight * 0.18, viewportHeight * 1.58),
1298+
viewportHeight * 1.36
12981299
);
12991300
hero.style.setProperty("--home-transition-distance", `${transitionDistance.toFixed(2)}px`);
13001301
root.style.setProperty("--home-next-layer-overlap", `${lowerLayerOverlap.toFixed(2)}px`);
13011302
};
13021303

13031304
const setAtmosphere = (amount) => {
1304-
body.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
1305+
root.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
13051306
};
13061307

1307-
const setLowerLayer = (amount) => {
1308-
const shift = lerp(lowerLayerStartShift, 0, amount);
1309-
root.style.setProperty("--home-next-layer-opacity", amount.toFixed(4));
1308+
const setLowerLayer = (opacityAmount, motionAmount) => {
1309+
const shift = lerp(lowerLayerStartShift, 0, motionAmount);
1310+
root.style.setProperty("--home-next-layer-opacity", opacityAmount.toFixed(4));
13101311
root.style.setProperty("--home-next-layer-shift", `${shift.toFixed(2)}px`);
13111312
};
13121313

@@ -1323,8 +1324,9 @@
13231324
const silhouetteFade = 1 - range(progress, 0.34, 0.58, easeInOutCubic);
13241325
const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
13251326
const heroUnitOpacity = Math.max(baseFade, silhouetteOpacity);
1326-
const atmosphereProgress = range(progress, 0.64, 0.96, easeInOutCubic);
1327-
const nextLayerProgress = range(progress, 0.64, 0.9, easeInOutCubic);
1327+
const nextLayerMotionProgress = range(progress, 0.38, 0.88, easeInOutCubic);
1328+
const nextLayerOpacityProgress = range(progress, 0.63, 0.94, easeInOutSine);
1329+
const atmosphereProgress = range(progress, 0.63, 0.985, easeInOutSine);
13281330
const backdropSuppression = progress < 0.88 ? "1" : "0";
13291331

13301332
root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));
@@ -1335,7 +1337,7 @@
13351337
root.style.setProperty("--home-image-base-contrast", baseContrast.toFixed(4));
13361338
root.style.setProperty("--home-image-silhouette-layer-opacity", Math.max(0, silhouetteOpacity).toFixed(4));
13371339
setAtmosphere(atmosphereProgress);
1338-
setLowerLayer(nextLayerProgress);
1340+
setLowerLayer(nextLayerOpacityProgress, nextLayerMotionProgress);
13391341

13401342
if (backdropSuppression !== lastBackdropSuppression) {
13411343
body.dataset.homeBackdropSuppressed = backdropSuppression;
@@ -1370,7 +1372,7 @@
13701372
root.style.setProperty("--home-image-base-contrast", "1");
13711373
root.style.setProperty("--home-image-silhouette-layer-opacity", "0");
13721374
setAtmosphere(1);
1373-
setLowerLayer(1);
1375+
setLowerLayer(1, 1);
13741376
body.dataset.homeBackdropSuppressed = "0";
13751377
lastBackdropSuppression = "0";
13761378
window.dispatchEvent(new Event("home-transition-sync"));
@@ -1784,14 +1786,15 @@
17841786
let lastPortraitState = portraitQuery.matches;
17851787
let loadingFadeScheduled = false;
17861788
let loadingFinished = false;
1789+
let revealTimer = 0;
17871790

17881791
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
17891792
const createLayout = (x, y, scale, rotate) => ({ x, y, scale, rotate });
17901793
const getSide = (offset) => (offset === 0 ? "front" : offset < 0 ? "left" : "right");
17911794

1792-
const setStackLoading = (isLoading) => {
1793-
shell?.setAttribute("data-stack-loading", isLoading ? "true" : "false");
1794-
stack.setAttribute("aria-busy", isLoading ? "true" : "false");
1795+
const setStackLoadingState = (state) => {
1796+
shell?.setAttribute("data-stack-loading", state);
1797+
stack.setAttribute("aria-busy", state === "false" ? "false" : "true");
17951798
};
17961799

17971800
const finishStackLoading = () => {
@@ -1800,33 +1803,36 @@
18001803
}
18011804

18021805
loadingFadeScheduled = true;
1803-
requestAnimationFrame(() => {
1804-
requestAnimationFrame(() => {
1805-
loadingFadeScheduled = false;
1806-
loadingFinished = true;
1806+
setStackLoadingState("settling");
1807+
window.setTimeout(() => {
1808+
loadingFadeScheduled = false;
1809+
loadingFinished = true;
1810+
stack.dataset.stackReady = "revealing";
1811+
setStackLoadingState("false");
1812+
window.clearTimeout(revealTimer);
1813+
revealTimer = window.setTimeout(() => {
18071814
stack.dataset.stackReady = "true";
1808-
setStackLoading(false);
1809-
});
1810-
});
1815+
}, 760 + Math.max(0, total - 1) * 88);
1816+
}, 280);
18111817
};
18121818

18131819
const buildLayouts = (cardWidth) => {
18141820
const steps = portraitQuery.matches
18151821
? [
18161822
{ x: 0, scale: 1, rotate: 0 },
1817-
{ x: cardWidth * 0.228, scale: 0.872, rotate: 5.1 },
1818-
{ x: cardWidth * 0.366, scale: 0.744, rotate: 8.4 },
1819-
{ x: cardWidth * 0.462, scale: 0.63, rotate: 11.1 },
1820-
{ x: cardWidth * 0.528, scale: 0.538, rotate: 13.5 },
1821-
{ x: cardWidth * 0.586, scale: 0.476, rotate: 15.3 }
1823+
{ x: cardWidth * 0.228, scale: 0.864, rotate: 5.1 },
1824+
{ x: cardWidth * 0.366, scale: 0.73, rotate: 8.4 },
1825+
{ x: cardWidth * 0.462, scale: 0.612, rotate: 11.1 },
1826+
{ x: cardWidth * 0.528, scale: 0.514, rotate: 13.5 },
1827+
{ x: cardWidth * 0.586, scale: 0.446, rotate: 15.3 }
18221828
]
18231829
: [
18241830
{ x: 0, scale: 1, rotate: 0 },
1825-
{ x: cardWidth * 0.238, scale: 0.886, rotate: 4.6 },
1826-
{ x: cardWidth * 0.386, scale: 0.762, rotate: 7.2 },
1827-
{ x: cardWidth * 0.486, scale: 0.654, rotate: 9.8 },
1828-
{ x: cardWidth * 0.55, scale: 0.566, rotate: 11.8 },
1829-
{ x: cardWidth * 0.604, scale: 0.502, rotate: 13.6 }
1831+
{ x: cardWidth * 0.238, scale: 0.878, rotate: 4.6 },
1832+
{ x: cardWidth * 0.386, scale: 0.748, rotate: 7.2 },
1833+
{ x: cardWidth * 0.486, scale: 0.638, rotate: 9.8 },
1834+
{ x: cardWidth * 0.55, scale: 0.544, rotate: 11.8 },
1835+
{ x: cardWidth * 0.604, scale: 0.482, rotate: 13.6 }
18301836
];
18311837

18321838
return steps.reduce((layouts, step, depth) => {
@@ -1940,7 +1946,8 @@
19401946

19411947
stack.classList.toggle("is-dragging", isDragging);
19421948

1943-
cards.forEach((card, index) => {
1949+
cards.forEach((card, index) => {
1950+
card.style.setProperty("--stack-reveal-order", String(index));
19441951
const offset = index - activeIndex;
19451952
let visual = getLayoutForOffset(offset);
19461953
let zIndex = getZIndex(offset);
@@ -2235,7 +2242,7 @@
22352242
stack.addEventListener("pointerleave", (event) => clearPointer(event, { snap: true }));
22362243

22372244
metrics = measureMetrics();
2238-
setStackLoading(true);
2245+
setStackLoadingState("true");
22392246
stack.dataset.stackReady = "false";
22402247
stack.classList.add("discipline-stack-viewport--static");
22412248
applyState();

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/css/style.css?v=20260418g">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260419a">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -228,6 +228,6 @@ <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
228228

229229
<div id="footer-slot"></div>
230230

231-
<script src="assets/js/shell.js?v=20260418g" defer></script>
231+
<script src="assets/js/shell.js?v=20260419a" defer></script>
232232
</body>
233233
</html>

0 commit comments

Comments
 (0)