Из блюра в резкость

Заголовок наводится на фокус: blur 18px → 0 с лёгким оседанием масштаба.

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

Из тумана

в резкость

Код

<h1 class="blur-in">Заголовок</h1>

<style>
.blur-in { opacity: 0; filter: blur(18px); transform: scale(1.06); }
.blur-in.play {
  animation: blurIn 1.1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes blurIn {
  to { opacity: 1; filter: blur(0); transform: none; } }
</style>

<script>
new IntersectionObserver(function (es, io) {
  es.forEach(function (e) {
    if (e.isIntersecting) { e.target.classList.add("play"); io.unobserve(e.target); }
  });
}, { threshold: .5 }).observe(document.querySelector(".blur-in"));
</script>

Промпт для ИИ

Сделай появление заголовков из блюра: изначально opacity 0, filter blur(18px), scale(1.06); при появлении в кадре анимация 1.1s по cubic-bezier(0.16,1,0.3,1) к резкому состоянию (blur 0, scale 1). Нескольким строкам — каскад задержек по 180мс. Эффект «наведения фокуса» — дорогой и спокойный. Не вешай на большие блоки с фото (blur дорог по перфомансу), только на текст.