Волна букв

Буквы качаются бегущей синусоидой — фазовый сдвиг задержек.

Просто смотрите.

Код

<h1 class="wave" data-wave="ТЕКСТ"></h1>

<style>
.wave span { display: inline-block;
  animation: w 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 90ms); }  /* фазовый сдвиг = волна */
@keyframes w {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.22em); } }
</style>

<script>
var el = document.querySelector(".wave");
Array.prototype.forEach.call(el.getAttribute("data-wave"), function (ch, i) {
  var sp = document.createElement("span");
  sp.textContent = ch;
  if (ch === " ") sp.style.width = ".3em";
  sp.style.setProperty("--i", i);
  el.appendChild(sp);
});
</script>

Промпт для ИИ

Сделай непрерывную волну букв: разбей текст на span-буквы (inline-block) с индексом в --i; каждая качается translateY 0 → -0.22em → 0 за 1.8s ease-in-out infinite с animation-delay i*90ms — фазовый сдвиг создаёт бегущую синусоиду. Использовать точечно (логотип, короткое слово), при prefers-reduced-motion отключать.