src/lib/components/HeroHeader.svelte

<script>
  import Typewriter from 'svelte-typewriter'
</script>

<div class="w-full">
  <h1 class="text-black dark:text-white transition-all duration-200 text-center font-extrabold text-7xl font-title relative z-[2]">
    Let's spy on
  </h1>
  <h1 class="max-w-max text-white dark:text-zinc-950 transition-all duration-200 text-center font-extrabold text-7xl font-title relative h-[80px] px-2.5 py-1 mx-auto">
    <Typewriter mode="loop" showCursorOnDelaw={true} wordInterval={2000} cursor={false}>
      <span>
        spaces
      </span>
      <span>
        models
      </span>
      <span>
        datasets
      </span>
      <span data-static class={`z-[-1] bg-teal-500 dark:bg-gradient-to-br from-indigo-500 to-teal-500 -skew-x-12 absolute top-0 left-0 w-full h-full`}></span>
    </Typewriter>
  </h1>
  <h2 class="text-center text-zinc-500 dark:text-zinc-300 transition-all duration-200 text-lg mt-5 max-w-lg mx-auto">
    Find all the information you need about your favorite spaces, models and datasets.
  </h2>
</div>