patx/afterdarklabs
add scroll hint indexerd
Commit dd1ce9b · patx · 2026-09-03T18:05:32-04:00
Comments
No comments yet.
Diff
diff --git a/docs/indexerd.html b/docs/indexerd.html
index 03a7e4e..aa55ade 100644
--- a/docs/indexerd.html
+++ b/docs/indexerd.html
@@ -216,13 +216,14 @@
}
.nav-brand-ready .nav-brand {
- visibility: visible;
+ visibility: hidden;
opacity: 1;
pointer-events: none;
transform: none;
}
.nav-brand-ready .nav-brand.is-visible {
+ visibility: visible;
pointer-events: auto;
}
@@ -247,10 +248,12 @@
.nav-brand-word {
display: flex;
+ gap: 0.22em;
padding-right: 0.08em;
- font-size: clamp(2.3rem, 11vw, 2.8rem);
- line-height: 0.76;
- letter-spacing: -0.08em;
+ font-size: clamp(1.25rem, 5.8vw, 1.7rem);
+ line-height: 0.9;
+ letter-spacing: -0.055em;
+ white-space: nowrap;
}
.nav-brand-letter {
@@ -272,7 +275,7 @@
@media (min-width: 1024px) {
.nav-brand-word {
- font-size: clamp(2.3rem, 4vw, 3.3rem);
+ font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.nav-cta {
@@ -332,30 +335,46 @@
will-change: opacity, filter, transform;
}
- .hero-letter-group {
+ .hero-scroll-hint {
+ position: absolute;
+ bottom: max(1rem, env(safe-area-inset-bottom));
+ left: 50%;
+ z-index: 3;
display: inline-flex;
- flex-direction: column;
- align-items: flex-start;
- vertical-align: top;
- line-height: 0.8;
- }
-
- .hero-letter-label {
- margin-top: 0.12em;
- color: currentColor;
- font-size: clamp(0.7rem, 1.65vw, 1.5rem);
+ align-items: center;
+ gap: 0.55rem;
+ color: #fff;
+ font-size: clamp(0.7rem, 1.1vw, 0.85rem);
font-weight: 500;
line-height: 1;
- letter-spacing: -0.045em;
+ letter-spacing: 0.08em;
+ text-decoration: none;
+ text-transform: uppercase;
+ transform: translateX(-50%);
+ transition: opacity 160ms ease;
+ }
+
+ .hero-scroll-hint::after {
+ width: 0.58em;
+ height: 0.58em;
+ border-right: 0.12em solid currentColor;
+ border-bottom: 0.12em solid currentColor;
+ content: "";
+ animation: hero-scroll-nudge 1.65s cubic-bezier(0.45, 0, 0.2, 1) infinite;
+ }
+
+ .hero-scroll-hint:hover {
+ opacity: 0.68;
}
- .hero-letter-group:nth-child(1) .hero-letter-label {
- margin-left: clamp(0.35rem, 0.7vw, 0.8rem);
+ .hero-scroll-hint:focus-visible {
+ outline: 2px solid var(--neon);
+ outline-offset: 0.4rem;
}
- .hero-letter-group:nth-child(2) .hero-letter-label,
- .hero-letter-group:nth-child(3) .hero-letter-label {
- margin-left: clamp(0.65rem, 4vw, 5rem);
+ @keyframes hero-scroll-nudge {
+ 0%, 100% { transform: translateY(-0.12rem) rotate(45deg); }
+ 50% { transform: translateY(0.2rem) rotate(45deg); }
}
@keyframes neon-letter-flicker {
@@ -428,6 +447,10 @@
text-wrap: balance;
}
+ #work-heading {
+ scroll-margin-top: calc(var(--site-nav-height) + 1rem);
+ }
+
.work-heading-words {
display: contents;
}
@@ -443,6 +466,13 @@
transition: font-weight 160ms ease;
}
+ .work-heading-email .bi-send {
+ display: inline-block;
+ width: 0.9em;
+ height: 0.9em;
+ vertical-align: -0.06em;
+ }
+
.work-heading-email:hover,
.work-heading-email:focus-visible {
font-weight: 700;
@@ -507,6 +537,10 @@
will-change: auto;
}
+ .hero-scroll-hint::after {
+ animation: none;
+ }
+
.work-intro {
height: auto;
}
@@ -637,13 +671,17 @@
color: #fff;
font-weight: 500;
text-decoration: none;
- transition: font-weight 160ms ease;
+ text-shadow: 0 0 currentColor;
+ transition: text-shadow 160ms ease;
white-space: nowrap;
}
.portfolio-live-link:hover,
.portfolio-live-link:focus-visible {
- font-weight: 700;
+ font-weight: 500;
+ text-shadow:
+ 0.018em 0 currentColor,
+ -0.018em 0 currentColor;
}
.portfolio-live-link:focus-visible {
@@ -783,16 +821,16 @@
<nav class="fixed top-0 z-50 w-full bg-black/90 backdrop-blur-lg">
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:py-5">
<div class="flex items-center justify-between gap-3 lg:hidden">
- <a href="#hero" class="nav-brand flex min-w-0 items-center rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Go to top">
- <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">A</span><span class="nav-brand-letter">D</span><span class="nav-brand-letter">L</span></span>
+ <a href="#hero" class="nav-brand flex min-w-0 items-center rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="After Dark Labs — go to top">
+ <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
</a>
<a href="mailto:[email protected]" class="nav-cta neon-ink shrink-0 rounded-2xl bg-[#fff] font-semibold transition-colors hover:bg-white">Let's Talk</a>
</div>
<div class="hidden items-center justify-between lg:flex">
- <a href="#hero" class="nav-brand flex items-center gap-3" aria-label="Go to top">
+ <a href="#hero" class="nav-brand flex items-center gap-3" aria-label="After Dark Labs — go to top">
<div>
- <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">A</span><span class="nav-brand-letter">D</span><span class="nav-brand-letter">L</span></span>
+ <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
</div>
</a>
<a href="mailto:[email protected]" class="nav-cta neon-ink rounded-2xl bg-[#fff] font-semibold transition-colors hover:bg-white">Let's Talk</a>
@@ -806,10 +844,12 @@
<div class="hero-content mx-auto grid w-full max-w-7xl justify-items-center gap-10 px-6 py-32 text-center">
<div>
- <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl" aria-label="ADL"><span class="hero-letter-group" aria-hidden="true"><span class="hero-letter">A</span><span class="hero-letter-label">After</span></span><span class="hero-letter-group" aria-hidden="true"><span class="hero-letter">D</span><span class="hero-letter-label">Dark</span></span><span class="hero-letter-group" aria-hidden="true"><span class="hero-letter">L</span><span class="hero-letter-label">Labs</span></span></h1>
+ <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl" aria-label="ADL"><span class="hero-letter" aria-hidden="true">A</span><span class="hero-letter" aria-hidden="true">D</span><span class="hero-letter" aria-hidden="true">L</span></h1>
</div>
</div>
+ <a class="hero-scroll-hint" href="#work-heading">Scroll</a>
+
</section>
<section class="work-intro" aria-labelledby="work-heading">
@@ -933,7 +973,11 @@
<span class="work-heading-word">your</span>
<span class="work-heading-word">business</span>
<span class="work-heading-word">forward</span>
- <span class="work-heading-word">↗</span>
+ <span class="work-heading-word">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
+ <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
+ </svg>
+ </span>
</a>
</span>
</h2>
@@ -990,7 +1034,7 @@
const hero = document.getElementById('hero');
const heading = hero?.querySelector('.hero-content h1');
const letters = Array.from(heading?.querySelectorAll('.hero-letter') || []);
- const labels = letters.map(letter => letter.parentElement?.querySelector('.hero-letter-label'));
+ const scrollHint = hero?.querySelector('.hero-scroll-hint');
const nav = document.querySelector('nav');
const brands = Array.from(document.querySelectorAll('.nav-brand'));
const navLetterGroups = brands.map(brand => Array.from(brand.querySelectorAll('.nav-brand-letter')));
@@ -1017,11 +1061,6 @@
letter.style.removeProperty('--hero-letter-blur');
letter.style.removeProperty('--hero-letter-scale');
});
- labels.forEach(label => {
- label?.style.removeProperty('opacity');
- label?.style.removeProperty('filter');
- label?.style.removeProperty('transform');
- });
navLetterGroups.forEach(group => group.forEach(letter => {
letter.style.setProperty('--nav-letter-opacity', revealBrand ? '1' : '0');
letter.style.removeProperty('--nav-letter-blur');
@@ -1033,6 +1072,11 @@
letter.style.removeProperty('--nav-letter-scale-y');
}));
brands.forEach(brand => brand.classList.toggle('is-visible', revealBrand));
+ if (scrollHint) {
+ scrollHint.style.opacity = revealBrand ? '0' : '1';
+ scrollHint.style.pointerEvents = revealBrand ? 'none' : 'auto';
+ scrollHint.toggleAttribute('inert', revealBrand);
+ }
return;
}
@@ -1049,11 +1093,12 @@
letter.style.setProperty('--hero-letter-opacity', (1 - eased).toFixed(4));
letter.style.setProperty('--hero-letter-blur', `${(eased * headingSize * 0.018).toFixed(2)}px`);
letter.style.setProperty('--hero-letter-scale', (1 - eased * 0.055).toFixed(4));
- const label = labels[index];
- if (label) {
- label.style.opacity = (1 - eased).toFixed(4);
- label.style.filter = `blur(${(eased * headingSize * 0.018).toFixed(2)}px)`;
- label.style.transform = `scale(${(1 - eased * 0.055).toFixed(4)})`;
+
+ if (scrollHint && index === letters.length - 1) {
+ const hintVisible = remaining > 0.02;
+ scrollHint.style.opacity = remaining.toFixed(4);
+ scrollHint.style.pointerEvents = hintVisible ? 'auto' : 'none';
+ scrollHint.toggleAttribute('inert', !hintVisible);
}
navLetterGroups.forEach(group => {