karsttech.com/layouts/partials/home/page.html

<div class="background-container" id="bg-container">
  <img id="background-thumb" alt="Background" class="background-image">
  <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
  <div id="cursor-circle"></div>
  <script>
    const thumbImg = document.getElementById('background-thumb');
    const fullImg = document.getElementById('background-full');
    const imageName = 'Apophysis_071008-64.webp';
    const thumbPath = `/backgrounds/thumbs/${imageName}`;
    const fullPath = `/backgrounds/${imageName}`;
    
    thumbImg.src = thumbPath;
    
    setTimeout(() => {
      const preloadImg = new Image();
      preloadImg.onload = () => {
        fullImg.src = fullPath;
        fullImg.classList.add('loaded');
        setTimeout(() => thumbImg.remove(), 2000);
      };
      preloadImg.onerror = () => {
        fullImg.src = fullPath;
        fullImg.classList.add('loaded');
      };
      preloadImg.src = fullPath;
    }, 800);

    const container = document.getElementById('bg-container');
    const circle = document.getElementById('cursor-circle');
    let hoverTimer = null;
    let revealTimer = null;
    let isRevealed = false;

    const isOverContent = (e) => {
      const target = e.target;
      return target.closest('article, header, nav, footer, section') !== null;
    };

    window.addEventListener('mousemove', (e) => {
      if (isRevealed) return;
      
      circle.style.left = e.clientX + 'px';
      circle.style.top = e.clientY + 'px';
      
      if (isOverContent(e)) {
        if (hoverTimer) {
          resetTimer();
        }
        return;
      }
      
      if (!hoverTimer) {
        hoverTimer = setTimeout(() => {
          circle.classList.add('active');
          revealTimer = setTimeout(() => {
            circle.classList.remove('active');
            circle.classList.add('fade-out');
            fullImg.classList.add('unblurred');
            isRevealed = true;
          }, 4000);
        }, 1000);
      }
    });

    const resetTimer = () => {
      clearTimeout(hoverTimer);
      clearTimeout(revealTimer);
      hoverTimer = null;
      revealTimer = null;
      circle.classList.remove('active');
    };

    const resetEffect = () => {
      resetTimer();
      circle.classList.remove('fade-out');
      fullImg.classList.remove('unblurred');
      isRevealed = false;
    };

    document.addEventListener('mouseout', (e) => {
      if (!e.relatedTarget && !e.toElement) {
        resetTimer();
      }
    });
    window.addEventListener('blur', resetTimer);
  </script>
</div>
<article class="prose max-w-full dark:prose-invert glass">
  {{ with .Title }}
    <header>
      <h1>{{ . | emojify }}</h1>
    </header>
  {{ end }}
  <section>{{ .Content | emojify }}</section>
</article>
<section>
  {{ partial "recent-articles.html" . }}
</section>