Вордмарк по буквам

Буквы логотипа влетают каскадом, под ними прорастает линия — стандартное интро дорогих студийных сайтов.

Интро играет само. «Повторить» — в углу.

REDHEAD

Код

<div class="intro">
  <span class="word">
    <i style="--i:0">B</i><i style="--i:1">R</i><i style="--i:2">A</i><i style="--i:3">N</i><i style="--i:4">D</i>
  </span>
  <span class="rule"></span>
</div>

<style>
.intro { position: fixed; inset: 0; z-index: 99; background: #101010;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center;
  animation: introOut .8s cubic-bezier(.16,1,.3,1) 2.2s forwards; }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

.word i { display: inline-block; font: 800 12vw/1 sans-serif; color: #fff;
  font-style: normal; opacity: 0; transform: translateY(.6em) rotate(5deg);
  animation: chIn .6s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(.25s + var(--i) * 70ms); }
@keyframes chIn { to { opacity: 1; transform: none; } }

.rule { width: 0; height: 2px; background: #fff;
  animation: rule 1s cubic-bezier(.16,1,.3,1) 1s forwards; }
@keyframes rule { to { width: 38vw; } }
</style>

Промпт для ИИ

Сделай интро с вордмарком: фиксированный тёмный оверлей, буквы логотипа — отдельные span с CSS-переменной --i, каждая влетает из translateY(0.6em) с поворотом 5deg, задержка 0.25s + i*70ms, кривая cubic-bezier(0.16,1,0.3,1). Под словом прорастает линия (width 0 → 38vw) с задержкой 1s. Через 2.2s весь оверлей растворяется (opacity 0 + visibility hidden, forwards). Показывай раз за сессию через sessionStorage; при prefers-reduced-motion пропускай.