Бегущая строка по кривой — текст на ленте, волне и круге

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

Фраза бесконечно бежит по кривой, как надпись на ленте. Кривую можно выбрать: волна или круг. Под текстом идёт лента той же формы. Если навести курсор, лента плавно останавливается, а когда курсор уходит, снова разгоняется.

Эффект сделан на SVG: текст стоит на кривой через <textPath>. Фраза повторяется столько раз, сколько помещается на кривой, и растягивается ровно на её длину. Две одинаковые копии текста идут друг за другом, поэтому стыка в бегущей строке не видно. Эффект сделан по мотивам Text Loop из коллекции React Bits, но без GSAP и React.

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

• Первый экран лендинга: название бренда или слоган, который всё время в движении.
• Разделитель между блоками — живая полоса вместо обычной линии.
• Анонсы и акции: «Скидки ✦ Новинки ✦ Доставка» на яркой ленте.
• Круглый бейдж у кнопки или логотипа: текст бежит по кругу.

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

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

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт для вставки на сайт. Скрипт без зависимостей.

Разметка — пустой блок с фразой в атрибуте data-text. SVG внутри скрипт нарисует сам:

<div class="text-loop" data-text="Tooolkit ✦ анимации"></div>

.text-loop { aspect-ratio: 1200 / 520; overflow: hidden; color: #171717; --text-loop-text: #fff; }

createTextLoop(document.querySelector('.text-loop'), { shape: 'wave', speed: 90 });

Цвет ленты задаёт CSS-свойство color у блока, цвет букв — переменная --text-loop-text. Пропорции 1200 × 520 в CSS держат место под ленту, пока скрипт не загрузился, поэтому страница не прыгает.

Настройки

• Форма — волна или круг.
• Направление — вперёд или назад по кривой.
• Скорость — как быстро бежит текст.
• Изгиб — высота волны или размер круга.
• Ширина ленты — толщина полосы под текстом. При нуле ленты нет, а текст принимает её цвет.
• Размер шрифта, жирность и разрядка — вид текста. Размер указан в единицах картинки шириной 1200 и масштабируется вместе с ней.
• Заглавными — переводит фразу в верхний регистр.
• Останавливать под курсором — лента плавно замирает при наведении.

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

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

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

Можно ли пустить текст по своей кривой? Да. Формы описаны в функции curve обычными SVG-путями в картинке 1200 × 520. Добавьте туда свою, и текст сам растянется по её длине.

Нужен ли GSAP, как в оригинале? Нет. Движение ведёт requestAnimationFrame, всё остальное делает SVG.

Какой шрифт используется? Шрифт страницы. Скрипт пересчитывает длину текста, когда веб-шрифт загрузится, поэтому повторы всегда стыкуются ровно.