Строки с поворотом

Строки въезжают из масок с rotate+skew от левого нижнего угла — фирменный «дорогой» вход.

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

Строки въезжают

с поворотом и скью —

как в GSAP-туториалах

Код

<h1>
  <span class="skl"><span>Строка один</span></span>
  <span class="skl"><span>Строка два</span></span>
</h1>

<style>
.skl { display: block; overflow: hidden; padding: .08em 0; }
.skl span { display: block; transform-origin: 0 100%;
  transform: translateY(120%) rotate(6deg) skewY(4deg); }
.play .skl span {
  animation: in .9s cubic-bezier(.16,1,.3,1) forwards; }
.play .skl:nth-child(2) span { animation-delay: .1s; }
@keyframes in { to { transform: none; } }
</style>

Промпт для ИИ

Сделай появление строк с поворотом (GSAP-стиль): строки в масках overflow:hidden, каждая изначально transform: translateY(120%) rotate(6deg) skewY(4deg) с transform-origin 0 100% (левый нижний угол); при появлении в кадре анимация к transform:none за 0.9s по cubic-bezier(0.16,1,0.3,1) с каскадом 100мс. Маскам паддинг .08em по вертикали, чтобы поворот не резался.