Эффект печатающегося текста в Fastry — как это работает и как настроить

Откройте страницу «О нас» в Fastry, и заголовок не стоит на месте. Он печатает слово, делает паузу, удаляет его и печатает следующее — циклически. В этом посте объясняется, как построен этот эффект, что контролирует каждое значение и как сделать его быстрее, медленнее или полностью убрать.

Где находится компонент

Весь эффект находится в одном файле:

src/components/ui/TypingEffect.astro

Это стандартный компонент Astro со встроенным <style> для мигания курсора и <script> для логики печати. Никаких сторонних библиотек или внешних зависимостей.

Как работает анимация

Компонент использует один рекурсивный цикл setTimeout — никакого setInterval. Каждый вызов tick() решает, добавлять или удалять один символ, затем планирует следующий вызов через соответствующую задержку.

Старт
  └─ ожидание 600 мс (начальная задержка)
       └─ tick()
            ├─ печать:   добавить один символ, подождать typeSpeed мс
            │    └─ когда слово завершено: подождать pauseAfterType мс, переключиться на удаление
            └─ удаление: удалить один символ, подождать deleteSpeed мс
                 └─ когда пусто: подождать pauseAfterDelete мс, перейти к следующему слову

Начальная задержка в 600 мс существует, чтобы анимация не начиналась во время отрисовки страницы на медленном соединении.

Свойства и их значения по умолчанию

Свойство	По умолчанию	Что контролирует
words	(обязательно)	Массив строк для циклического перебора
typeSpeed	120	Миллисекунды между каждым печатаемым символом
deleteSpeed	70	Миллисекунды между каждым удаляемым символом
pauseAfterType	1800	Пауза в мс после полного набора слова
pauseAfterDelete	400	Пауза в мс после полного удаления слова

Шпаргалка по настройке

Цель	Что изменить
Быстрее печать	Уменьшить typeSpeed (например, 120 → 60)
Медленнее печать	Увеличить typeSpeed (120 → 180)
Быстрее удаление	Уменьшить deleteSpeed (70 → 35)
Длиннее пауза после печати	Увеличить pauseAfterType (1800 → 3000)
Короче пауза между словами	Уменьшить pauseAfterDelete (400 → 150)
Другие слова	Изменить массив words
Другой символ курсора	Заменить `
Удалить эффект	Заменить <TypingEffect> на простой <span>

Доступность

Компонент оборачивает всё в <span> с aria-label, содержащим все слова через запятую. Скринридеры объявляют полный список слов из aria-label и игнорируют анимированное содержимое внутри.

Влияние на SEO

Astro рендерит заголовок на сервере, поэтому полный элемент присутствует в HTML-коде до выполнения JavaScript. Поисковые системы читают статический HTML и индексируют все слова из aria-label.