headinganimatedslide-intailwindtextresponsive

Animated Letter Slide-In Heading

Анимированный заголовок с буквами, появляющимися со смещением. Адаптивный, на Tailwind CSS. Идеален для баннеров и логотипов.

Live Preview

Prompt

<span class="block text-[12vw] sm:text-[10vw] md:text-[8vw] lg:text-[9vw] font-semibold pr-1" style="overflow: hidden; letter-spacing: -0.15em;">
        <span style="display: inline-block; animation: 0.8s ease-out 0s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">S</span>
        <span style="display: inline-block; animation: 0.8s ease-out 0.1s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">T</span>
        <span style="display: inline-block; animation: 0.8s ease-out 0.2s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">U</span>
        <span style="display: inline-block; animation: 0.8s ease-out 0.3s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">D</span>
        <span style="display: inline-block; animation: 0.8s ease-out 0.4s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">I</span>
        <span style="display: inline-block; animation: 0.8s ease-out 0.5s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">O</span>
        <style>
          @keyframes letterSlideIn {
            0% {
              transform: translateY(-100%);
              opacity: 0;
            }
        
            50% {
              opacity: 0.5;
            }
        
            100% {
              transform: translateY(0);
              opacity: 1;
            }
          }
        </style>
</span>

All Prompts