chore: blur contents on line hover

Author: adithyaakrishna

apps/sim/app/(landing)/blog/[slug]/page.tsx

@@ -57,7 +57,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       />
 
       <div className='mx-auto flex w-full max-w-[1500px] flex-col items-start gap-2 pb-24 pt-16 xl:flex-row'>
-        <div className='max-w-5xl flex-grow mx-auto'>
+        <div data-blog-main-content className='max-w-5xl flex-grow mx-auto'>
           <Link
             href='/blog'
             className='group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[11px] uppercase tracking-widest text-[#999] transition-colors hover:text-[#ECECEC]'

apps/sim/app/(landing)/blog/[slug]/prose-studio.css

@@ -220,8 +220,24 @@
   color: #ffcc02;
 }
 
+[data-blog-main-content] {
+  transition:
+    filter 180ms ease-out,
+    opacity 180ms ease-out;
+  will-change: filter, opacity;
+}
+
+body[data-toc-rail-hover="true"] [data-blog-main-content] {
+  filter: blur(2.5px);
+  opacity: 0.58;
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
+  [data-blog-main-content] {
+    transition: none;
+  }
+
   .prose-studio a {
     transition: none;
   }

apps/sim/app/(landing)/blog/[slug]/table-of-contents.tsx

@@ -431,6 +431,21 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
     return () => observerRef.current?.disconnect()
   }, [headings])
 
+  useEffect(() => {
+    if (isLineRailHovering) {
+      document.body.dataset.tocRailHover = 'true'
+      return () => {
+        document.body.removeAttribute('data-toc-rail-hover')
+      }
+    }
+
+    document.body.removeAttribute('data-toc-rail-hover')
+
+    return () => {
+      document.body.removeAttribute('data-toc-rail-hover')
+    }
+  }, [isLineRailHovering])
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLElement>) => {
       const nav = navRef.current