Wispr Flow Text Animation

Wispr Flow's animation is unique because it wraps a block of text on an SVG path.

Essentially, the text is a part of an SVG path, not rendering any text nodes but still being able to animate the text.

Here's a breakdown of the animation.

the below code is doing most of the heavy lifting

<text
  x="-2000"
  className="text-[15px]"
>
  <textPath
    id="marquee-text-second"
    href="#second-curve"
    className="fill-white font-semibold [baseline-shift:-30%]"
  >
    {RIGHT_TEXT}
  </textPath>
  <animate
    id="marquee-anim-second"
    attributeName="x"
    dur="25s"
    values="-2000;0"
    repeatCount="indefinite"
  />
</text>