Вращающийся текст — буквы катятся по 3D-барабану

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

Слово напечатано на гранях барабана, который без остановки вращается. Каждая буква поворачивается чуть позже предыдущей, поэтому слово не крутится целиком: по нему бежит волна, и буквы перекатываются одна за другой. Выглядит как механическое табло или счётчик.

Каждая буква повёрнута в 3D через rotateX вокруг оси, которая лежит позади текста. Так буквы двигаются по поверхности цилиндра. Само вращение — обычная CSS-анимация с задержками: скрипт только разбивает слово на буквы, раскладывает копии по граням и задаёт тайминги. Эффект сделан по мотивам пена GreenSock «Rolling text», но без GSAP и платного плагина SplitText.

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

• Первый экран — название бренда или одно крупное слово.
• Заставка во время загрузки или на экране «скоро открытие».
• Акцент в заголовке: одно слово в предложении катится, остальные стоят.

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

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

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

<p class="rolling-text">Tooolkit</p>

createRollingText(document.querySelector('.rolling-text'), { speed: 4, stagger: 0.18 });

Шрифт, размер и цвет задаёт обычный CSS у элемента. Стили анимации скрипт добавляет на страницу сам.

Настройки

• Скорость — сколько секунд грань прокатывается через барабан. Меньше — быстрее.
• Задержка букв — насколько каждая следующая буква опаздывает за предыдущей. При нуле слово катится целиком.
• Граней — сколько копий слова на барабане. Больше граней — копии идут чаще.
• Радиус барабана — в размерах шрифта. Чем больше, тем плавнее буквы выкатываются.
• Перспектива — расстояние до зрителя. Меньше — барабан выглядит круглее.
• Направление — буквы катятся вверх или вниз.

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

Скринридер читает слово один раз: копии на гранях от него скрыты. Если в системе включено «Уменьшить движение», барабан стоит, и слово видно ровно. Анимирует браузер сам, через CSS и только transform, поэтому скрипт не работает на каждом кадре.

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

Можно ли несколько слов? Да, пробелы сохраняются. Но длинную фразу читать на вращающемся барабане тяжело, поэтому эффект лучше смотрится на одном-двух словах.

Нужен ли GSAP, как в оригинале? Нет. В оригинале GSAP и SplitText, здесь — CSS-анимация и около 80 строк JavaScript.