mlc-ai--web-llm/site/_includes/hero.html

<section id="hero">
  <div class="heading-container">
    <h1>WebLLM: High-Performance In-Browser LLM Inference Engine</h1>
    <div class="link-container">
      <a class="get-start-link" href="/docs">
        <span class="get-start-link-content">
          <span>Get Started</span>
          <span class="arrow-container">{% include arrow.svg %}</span></span
        >
      </a>
      <a class="chat-link moving-border" href="https://chat.webllm.ai">
        <span class="border"></span>
        <span class="chat-link-content">
          <span>Chat with WebLLM</span>
          <span class="arrow-container">{% include arrow.svg %}</span>
          </span>
      </a>
    </div>
  </div>
  <div class="video-container">
    <video
      autoplay
      playsinline
      muted
      poster="{{ site.base }}/assets/img/fig/Pittsburgh.png"
    >
      <source
        src="{{ site.base }}/assets/video/Pittsburgh.webm"
        type="video/webm"
      />
      <source
        src="{{ site.base }}/assets/video/Pittsburgh.mp4"
        type="video/mp4"
      />
    </video>
  </div>
</section>

<script>
  (function() {

  function handlerIn(e) {
    $(this).addClass("expanded");
  }
  function handlerOut(e) {
    $(this).removeClass("expanded");
  }

  $(".chat-link").hover(handlerIn, handlerOut);
  $(".github-link").hover(handlerIn, handlerOut);

  var video = $("video")[0];
  video.play().then((_) => {
    let observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (
              entry.intersectionRatio !== 1 &&
              !video.paused
          ) {
            video.pause();
          } else if (video.paused) {
            video.play();
          }
        });
      },
        { threshold: 0.2 }
    );
    observer.observe(video);
  });
})()
</script>