Подберите характер своей типографики

Текст, который хочется рассмотреть

28 собственных примеров. Выберите эффект, подставьте фразу и заберите готовый код. Анимируется только выбранный пример.

Начните с эффекта

28 примеров

Карточки статичны — движение видно в большом примере ниже.

Настройте под себя

К предпросмотру

До 60 символов. Для эффекта лучше короткая фраза.

На небольшом экране размер автоматически уменьшается.

Меньше времени — быстрее движение.

Меняет амплитуду движения или радиус света. Для фактуры и линий эта настройка не используется.

Сохраняет оформление, отключает анимацию.

Буквы

Волна

Статичный пример
Текст, который живёт
Текст и настройки

Пример статичен. Нажмите «Запустить / повторить».

Посмотрите короткий заголовок на выбранном фоне.

Соседние буквы поднимаются по очереди, а фраза остаётся на своём месте.

Как устроено
Где пригодится
Что учесть

Для этого эффекта буквы обёрнуты в отдельные span. В коде есть готовая разметка и небольшой помощник для смены текста.

Без внешних зависимостей у выбранного эффекта

Заберите результат

Автономный HTML включает ваш текст, выбранные цвета, CSS, управление запуском и режим без движения. Откройте файл в браузере.

Для вставки нужны HTML и CSS. Изначально текст статичен; небольшой скрипт запускает эффект после действия человека. Стили имеют префикс cex-, чтобы их было проще встроить в существующий сайт.

Перед публикацией проверьте

Читаемость

Выберите контрастные текст, акцент и фон. Важные слова должны оставаться понятными без эффекта.

Телефон

Проверьте длинную фразу, переносы и слабое устройство. Для рабочего интерфейса оставьте умеренное движение.

Контроль

Дайте пользователю возможность остановить движение. Этот стенд учитывает системное уменьшение анимации.