Анимация вариативного шрифта — волна ширины букв за курсором

Что это за эффект

Крупное слово-логотип реагирует на курсор. Буквы под ним раздаются вширь и становятся жирнее, дальние сжимаются, и по слову бежит волна. Общая длина слова при этом не меняется: оно всегда ровно заполняет контейнер, поэтому вёрстка вокруг не прыгает. Если курсора нет, волна сама медленно идёт по слову, и заголовок остаётся живым даже на телефоне.

Эффект построен на вариативном шрифте. Это один файл шрифта, в котором ширина (wdth) и жирность (wght) меняются плавно, а не ступеньками. Скрипт выставляет каждой букве свои значения осей через font-variation-settings.

Где использовать

• Логотип или название бренда на первом экране. На главной странице Tooolkit стоит именно этот эффект.
• Крупные заголовки разделов на промо-страницах и в портфолио.
• Баннеры и экраны-заставки, где одно слово должно привлечь внимание без картинок.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт, впишет их в вашу вёрстку и подставит ваши тексты и изображения. Ваши настройки сохранятся.

Если что-то нужно иначе, скажите агенту об этом теми же словами, что и человеку: «сделай на всю ширину экрана», «поставь под заголовком на главной», «замедли в два раза».

Вручную. Нужен вариативный шрифт с осями wdth и wght. В примере это Google Sans Flex из Google Fonts, у него ширина меняется от 25 до 151. Подключите шрифт, разметьте слово и вызовите функцию:

<div class="width-wave-area">
  <h1 class="width-wave">TOOOLKIT</h1>
</div>

createWidthWave(
  document.querySelector('.width-wave'),
  { radius: 4, wmin: 25, wmax: 151 },
  document.querySelector('.width-wave-area'),
);

Скрипт сам разбивает текст на буквы. Третий аргумент — область, где отслеживается курсор: обычно это блок вокруг заголовка, чтобы волна начиналась ещё до того, как курсор попал в буквы. Полный код с вашими настройками дают кнопки «Скопировать код» и «Скачать код» выше.

Настройки

• Ширина волны — сколько букв вокруг курсора расширяются.
• Плавность и затухание — как быстро буквы догоняют курсор и как быстро эффект появляется и гаснет.
• Макс. и мин. ширина — диапазон оси wdth. С другим шрифтом подберите его под диапазон этого шрифта.
• Сжатие соседей — насколько сужаются дальние буквы; 0 оставляет их как есть.
• Жирность и жирность волны — базовый вес слова и добавка на гребне волны. Отрицательная добавка делает гребень тоньше.
• Режимы: держать общую длину слова, показывать волну только пока мышь движется, пускать волну без мыши.

Доступность и производительность

Буквы разбиты на отдельные span, поэтому заголовку стоит дать aria-label с целым словом, иначе скринридер может прочитать его по буквам. При включённой настройке «Уменьшить движение» слово остаётся статичным. Анимация обновляет только оси шрифта у одного слова, нагрузка на страницу минимальна.

Частые вопросы

Подойдёт ли любой шрифт? Нет, только вариативный с осью ширины wdth. У обычного шрифта ширина букв не меняется.

Работает ли с кириллицей? Да, если в выбранном шрифте есть кириллица и ось wdth.

Можно ли поставить длинную фразу? Эффект рассчитан на одно слово в одну строку: длинную фразу скрипт не переносит.