Изогнутая линия рисуется в SVG как , а устанавливается на нее с помощью :

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
    <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
    <text width="100%" style="transform:translate3d(0,0,0);">
        <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve">*The pictures are not technically selfies.</textPath>
    </text>
</svg>

Трюк с перемещением происходит путем настройки атрибута startOffset элемента textPath.

Я не уверен на 100%, как они это сделали, но мы можем сделать небольшую хакерскую математику, наблюдая положение прокрутки страницы и устанавливая этот атрибут так, чтобы он двигался так быстро и так далеко, как нам хочется.

const textPath = document.querySelector("#text-path");

const h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 40) + 1200)
});

Вот демо:

Текст на изогнутой линии - это крутой дизайн по ряду причин! Его просто не так много видно в Интернете, поэтому, когда он используется, он выделяется.