assets/header.svg

<svg fill="none" viewBox="0 0 800 70" width="800" height="70" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .headline {
          color: #000000;
          align-items: center;
          display: flex;
          font-family: 'Lexend Deca', sans-serif;
          font-weight: 700;
          font-size: 40pt;
          justify-content: start;
          perspective: 1000px;
          white-space: break-spaces;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: 0;
        }

        .word,
        .char {
          animation-delay: var(--del);
          animation-direction: var(--dir, normal);
          animation-duration: var(--dur);
          animation-iteration-count: var(--it, infinite);
          animation-name: var(--name);
          animation-timing-function: var(--tf);
          animation-fill-mode: var(--fill, forwards);
          display: inline-block;
          position: relative;
          transform-origin: 50% 100%;
          z-index: 1;
          box-sizing: border-box;
          text-shadow: 
            -1px -1px 0px #ffffff,
            0px -1px 0px #ffffff,
            1px -1px 0px #ffffff,
            -1px  0px 0px #ffffff,
            1px  0px 0px #ffffff,
            -1px  1px 0px #ffffff,
            0px  1px 0px #ffffff,
            1px  1px 0px #ffffff;
        }

        .headline--float .char {
          --name: float;
          --dur: 2200ms;
          --del: calc(var(--char-index) * -0.5s);
          --tf: ease-in-out;
          --dir: alternate;
        }

        .headline--float .char:nth-child(2n) {
          --name: float-alt;
        }

        @keyframes float {
          from {
            transform: translate(2%, -8%) rotate(-1deg);
          }

          to {
            transform: translate(-2%, 3%) rotate(3deg);
          }
        }

        @keyframes float-alt {
          from {
            transform: translate(0%, -3%) rotate(-1deg);
          }

          to {
            transform: translate(2%, 8%) rotate(3deg);
          }
        }
      </style>
      <h2 class="headline headline--float words chars splitting"
        style="--word-total:2; --char-total:14;"><span class="word" data-word="Rebecca" style="--word-index:0;"><span
            class="char" data-char="R" style="--char-index:0;">R</span><span class="char" data-char="e"
            style="--char-index:1;">e</span><span class="char" data-char="b" style="--char-index:2;">b</span><span
            class="char" data-char="e" style="--char-index:3;">e</span><span class="char" data-char="c"
            style="--char-index:4;">c</span><span class="char" data-char="c" style="--char-index:5;">c</span><span
            class="char" data-char="a" style="--char-index:6;">a</span></span><span class="whitespace"> </span><span
          class="word" data-word="Stevens" style="--word-index:1;"><span class="char" data-char="S"
            style="--char-index:7;">S</span><span class="char" data-char="t" style="--char-index:8;">t</span><span
            class="char" data-char="e" style="--char-index:9;">e</span><span class="char" data-char="v"
            style="--char-index:10;">v</span><span class="char" data-char="e" style="--char-index:11;">e</span><span
            class="char" data-char="n" style="--char-index:12;">n</span><span class="char" data-char="s"
            style="--char-index:13;">s</span></span></h2>
    </div>
  </foreignObject>
</svg>