headlineanimatedtailwindcsstypographybannerresponsivelanding page

Animated Hero Headline with Arrow Accent

Анимированный заголовок из двух строк с плавным появлением текста и иконкой стрелки. Адаптивный дизайн для лендингов и разделов сайта.

Live Preview

Prompt

<div class="text-center space-y-4 mb-16 scroll-element fade-in-up animate-in stagger-0 visible">
  <h1 class="text-4xl sm:text-6xl lg:text-8xl font-light tracking-tighter leading-none">
    <span class="flex items-center justify-center gap-4 scroll-element fade-in-up stagger-1 visible">
                        CREATIVE
                        <span class="inline-flex bg-coral-50 rounded-full p-2 scroll-element scale-bounce stagger-2 visible">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-big-right" class="lucide lucide-arrow-big-right w-6 h-6 text-coral-500"><path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" class=""></path></svg>
                        </span>
    DESIGN
    </span>
  </h1>
  <h1 class="text-4xl sm:text-6xl lg:text-8xl font-light tracking-tighter leading-none">
    <span class="flex items-center justify-center gap-4 scroll-element fade-in-up stagger-3 visible">
                        VISUAL
                        <span class="inline-flex bg-coral-50 rounded-full p-2 scroll-element scale-bounce stagger-4 visible">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-big-right" class="lucide lucide-arrow-big-right w-6 h-6 text-coral-500"><path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" class=""></path></svg>
                        </span>
    <span class="flex items-center justify-center gap-4 scroll-element fade-in-up stagger-5 visible">STUDIO</span>
    </span>
  </h1>
</div>

All Prompts