hero animated stagger word-by-word cursor typing saas landing-page hero stagger word-animation cursor typing animated saas landing-page animated hero with staggered word reveal typing cursor hero section word-by-word headline animation
Hero Fused Title
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/fused-title.json fused-title.html
<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] py-28 text-center">
<style>
@keyframes ws-word-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.ws-word {
display: inline-block;
opacity: 0;
animation: ws-word-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ws-cursor-blink {
0%, 49.9% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.ws-cursor {
display: inline-block;
width: 3px;
height: 0.85em;
background: currentColor;
vertical-align: middle;
margin: 0 3px;
border-radius: 1px;
animation: ws-cursor-blink 1s step-start infinite;
}
@media (prefers-reduced-motion: reduce) {
.ws-word { animation: none; opacity: 1; }
.ws-cursor { animation: none; }
}
</style>
<div class="mx-auto max-w-4xl px-6">
<!-- Pre-heading badge -->
<div class="mb-8 inline-flex items-center gap-2 rounded-full border border-[var(--ws-hero-border)] bg-[var(--ws-hero-border)] px-4 py-1.5">
<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--ws-hero-action-bg)]"></span>
<span class="text-xs font-medium uppercase tracking-widest text-[var(--ws-hero-text-muted)]">Now with AI</span>
</div>
<!-- Animated headline -->
<h1
class="text-balance text-5xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-6xl lg:text-7xl"
aria-label="Write. Draw. Plan. All at once."
>
<span class="ws-word" style="animation-delay: 0ms">Write.</span>
<span class="ws-cursor" aria-hidden="true"></span>
<span class="ws-word" style="animation-delay: 150ms">Draw.</span>
<span class="ws-cursor" aria-hidden="true"></span>
<span class="ws-word" style="animation-delay: 300ms">Plan.</span>
<br>
<span class="ws-word" style="animation-delay: 450ms">All</span>
<span class="ws-word" style="animation-delay: 550ms"> at</span>
<span class="ws-word" style="animation-delay: 650ms"> once.</span>
</h1>
<!-- Subline -->
<p
class="mx-auto mt-6 max-w-xl text-pretty text-lg leading-relaxed text-[var(--ws-hero-text-soft)]"
style="animation: ws-word-in 0.5s 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 0"
>
A workspace where docs, whiteboards, and databases merge seamlessly.
Built for teams who think visually and ship fast.
</p>
<!-- CTA row -->
<div
class="mt-10 flex flex-wrap justify-center gap-4"
style="animation: ws-word-in 0.5s 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 0"
>
<a
href="#"
class="rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition-colors hover:bg-[var(--ws-hero-action-bg-hover)]"
>
Get Started Free
</a>
<a
href="#"
class="rounded-xl border border-[var(--ws-hero-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition-colors hover:bg-[var(--ws-hero-border)]"
>
View on GitHub
</a>
</div>
<!-- Social proof line -->
<p
class="mt-8 text-xs text-[var(--ws-hero-text-muted)]"
style="animation: ws-word-in 0.5s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 0"
>
Trusted by 12,000+ teams · No credit card required
</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
heroanimatedstaggerword-by-wordcursortypingsaaslanding-page
Slots
| Name | Required | Description |
|---|---|---|
| badge | No | Pre-heading pill with status or feature label. |
| headline | Yes | Staggered animated title words with inline cursor symbols. |
| body | Yes | Supporting subline text, fades in after headline completes. |
| actions | Yes | Primary and secondary CTA buttons, animate in last. |
| social-proof | No | Optional micro-copy line below CTAs for trust signals. |
Jedes Wort im Titel trägt eine eigene animation-delay für den Stagger-Effekt. Blinkende Cursor-Symbole (aria-hidden="true") zwischen den Schlüsselwörtern suggerieren aktives Tippen. Das aria-label auf dem <h1> stellt die korrekte Screen-Reader-Ausgabe sicher, unabhängig von den versteckten Cursor-Elementen. Subline und CTAs folgen mit längeren Delays nach dem Ende der Headline-Sequenz. prefers-reduced-motion deaktiviert alle Animationen und zeigt alle Elemente sofort sichtbar.