Personal Website, vers. 1 (pushed far to late)

client/js/reveal.js

@@ -0,0 +1,58 @@
+export function initReveal() {
+  const items = document.querySelectorAll('[data-reveal]');
+  if (!('IntersectionObserver' in window)) {
+    for (const item of items) item.classList.add('is-visible');
+    return;
+  }
+
+  const groups = new Map();
+  const observer = new IntersectionObserver(
+    (entries) => {
+      // things that come into view together get a small stagger
+      let index = 0;
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        for (const item of groups.get(entry.target)) {
+          item.style.setProperty('--delay', `${Math.min(index++ * 90, 450)}ms`);
+          item.classList.add('is-visible');
+        }
+        observer.unobserve(entry.target);
+      }
+    },
+    { rootMargin: '0px 0px -6% 0px' },
+  );
+
+  for (const item of items) {
+    // Chrome applies the element's own clip-path, so a fully clipped heading never
+    // counts as intersecting. Watch the parent for those instead.
+    const target = item.dataset.reveal === 'mask' ? item.parentElement : item;
+    if (!groups.has(target)) groups.set(target, []);
+    groups.get(target).push(item);
+    observer.observe(target);
+  }
+}
+
+// Fallback for browsers without scroll-driven animations
+export function initTimeline() {
+  const timeline = document.querySelector('[data-timeline]');
+  if (!timeline || CSS.supports('animation-timeline: view()')) return;
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  let ticking = false;
+  const update = () => {
+    const rect = timeline.getBoundingClientRect();
+    const progress = (innerHeight * 0.75 - rect.top) / rect.height;
+    timeline.style.setProperty('--progress', Math.min(1, Math.max(0, progress)).toFixed(3));
+    ticking = false;
+  };
+
+  addEventListener(
+    'scroll',
+    () => {
+      if (!ticking) requestAnimationFrame(update);
+      ticking = true;
+    },
+    { passive: true },
+  );
+  update();
+}