refactor: Use IntersectionObserver in Layout component

src/components/layout.css

@@ -15,8 +15,6 @@ body {
   padding-top: var(--nav-height);
 
   /* Set in JavaScript */
-  --magic-hero-number: 365px;
-
   --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
   --banner-gradient: linear-gradient(to right, var(--purple9), var(--blue7));
   --nav-height: 6.2rem;
@@ -239,22 +237,12 @@ main {
 }
 
 .side-nav__title {
-  background-attachment: fixed;
-  -webkit-background-clip: text;
-  background-clip: text;
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 51%);
-  background-position: 0px calc(-50vh + var(--magic-hero-number));
-  background-size: 100% 100vh;
-  color: white;
-  /* Force new paint layer in Firefox for rendering bug with background clip position sticky */
-  filter: opacity(0.9);
+  color: #000;
   font-weight: 200;
   letter-spacing: 2px;
   margin: 2.8rem 0 2.4rem;
   position: sticky;
-  -webkit-text-fill-color: transparent;
   top: 2.8rem;
-  will-change: background-position;
   z-index: 999;
 }
 

src/components/layout.tsx

@@ -14,23 +14,21 @@ type Props = {
 };
 
 const Layout = ({ children, title, description, img }: Props) => {
-  const prevOffset = useRef(-1);
 
-  // Header hero number CSS varaiable.
-  const magicHeroNumber = () => {
-    if (typeof window === 'undefined') {
-      return;
-    } // Guard for SSR.
-    const doc = window.document;
-    const offset = Math.min(doc.scrollingElement!.scrollTop - 62, 210);
-    if (Math.abs(prevOffset.current - offset) > 5) {
-      prevOffset.current = offset;
-      doc.body.setAttribute('style', `--magic-hero-number: ${356 - offset}px`);
-    }
-    window.requestAnimationFrame(magicHeroNumber);
-  };
+  useEffect(() => {
+    const root = document.querySelector('.side-nav')
+    const options = { root, threshold: 0.5, rootMargin: '-93px 0px 0px 0px' }
+    const observer = new IntersectionObserver(onIntersectionChange, options)
+    const targets = document.querySelectorAll('.side-nav__title');
+    targets.forEach(target => observer.observe(target))
+  })
 
-  useEffect(magicHeroNumber);
+  const onIntersectionChange = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach(entry => {
+      const element = entry.target as HTMLElement;
+      element.style.color = entry.isIntersecting ? '#000' : '#fff'
+    })
+  }
 
   return (
     <>

src/components/mobile.css

@@ -148,7 +148,6 @@
     padding-left: 3.2rem;
     margin: 2.4rem 0 3.2rem;
     top: calc(var(--nav-height) + 12px);
-    background-position: 0px calc(-50vh + var(--magic-hero-number) - 32px);
   }
 
   .article-reader {