Сжатие из разрядки

Буквы слетаются из letter-spacing .5em с блюром в плотное слово.

«Повторить» — в углу.

СХОДИМСЯ

Код

<h1 class="tracking">ЗАГОЛОВОК</h1>

<style>
.tracking { letter-spacing: .5em; opacity: 0; }
.tracking.play {
  animation: trk 1.3s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes trk {
  0%   { letter-spacing: .5em; opacity: 0; filter: blur(6px); }
  100% { letter-spacing: -.02em; opacity: 1; filter: blur(0); } }
</style>

Промпт для ИИ

Сделай появление заголовка сжатием из разрядки (tracking-in): стартовое состояние letter-spacing .5em + opacity 0 + blur(6px); анимация за 1.3s по cubic-bezier(0.16,1,0.3,1) к letter-spacing -0.02em, полной непрозрачности и резкости — буквы «слетаются» в слово. Триггер — появление в кадре. Работает только на коротких словах капсом.