Волна веса шрифта

По слову бежит волна жирности 100→900 — магия вариативного шрифта.

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

Код

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<h1 class="vwave" data-text="ТЕКСТ"></h1>

<style>
.vwave { font-family: "Inter", sans-serif; }   /* вариативный! */
.vwave span { display: inline-block; font-weight: 100;
  animation: vw 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 110ms); }
@keyframes vw {                     /* вес анимируется плавно, */
  0%, 100% { font-weight: 100; }    /* потому что шрифт вариативный */
  50% { font-weight: 900; } }
</style>

<!-- JS: разбить на span с --i -->

Промпт для ИИ

Сделай волну веса вариативного шрифта: подключи вариативный шрифт с осью wght (Inter 100..900 с Google Fonts), разбей текст на буквы-спаны с --i; у каждой keyframes font-weight 100 → 900 → 100 за 2.2s ease-in-out infinite с задержкой i*110мс — по слову бежит волна жирности. Работает ТОЛЬКО с вариативным шрифтом (иначе вес прыгает ступенями). Буквы слегка меняют ширину — это часть шарма, но не для строк в фиксированной сетке.