Sliding Highlight Text Effect

<div class="txt-sliding-highlight-text">Plan. Build. Ship.<span class="txt-sliding-highlight-text-pill" aria-hidden="true">Plan. Build. Ship.</span></div>

.txt-sliding-highlight-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;}
/* a white copy of the line on an accent fill, clipped to the pill.
   Monospace makes every word a known width: Plan. (0-5ch) Build. (6-12ch) Ship. (13-18ch),
   and the copy is 0.35ch wider on each side to pad the pill */
.txt-sliding-highlight-text-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.35ch;
  right: -0.35ch;
  padding: 0 0.35ch;
  background: var(--c);
  color: #fff;
  clip-path: inset(0 13ch 0 0 round 0.2em);
  /* 3 words x 1.5s = 4.5s; halfway through each move the front edge is nearly there */
  animation: txt-sliding-highlight-text-slide 4.5s infinite;
}
@keyframes txt-sliding-highlight-text-slide {
  0%, 22.22% {
    clip-path: inset(0 13ch 0 0 round 0.2em);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.6);
  }
  27.78% {
    clip-path: inset(0 7.05ch 0 0.9ch round 0.2em);
    animation-timing-function: cubic-bezier(0.2, 0.4, 0.45, 1);
  }
  33.33%, 55.56% {
    clip-path: inset(0 6ch 0 6ch round 0.2em);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.6);
  }
  61.11% {
    clip-path: inset(0 0.9ch 0 7.05ch round 0.2em);
    animation-timing-function: cubic-bezier(0.2, 0.4, 0.45, 1);
  }
  66.67%, 88.89% {
    clip-path: inset(0 0 0 13ch round 0.2em);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.6);
  }
  94.44% {
    clip-path: inset(0 1.95ch 0 1.95ch round 0.2em);
    animation-timing-function: cubic-bezier(0.2, 0.4, 0.45, 1);
  }
  100% { clip-path: inset(0 13ch 0 0 round 0.2em); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-sliding-highlight-text, .txt-sliding-highlight-text *, .txt-sliding-highlight-text::before, .txt-sliding-highlight-text::after, .txt-sliding-highlight-text *::before, .txt-sliding-highlight-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar text animations