Animated Headline
1950s-diner animated headline — words lift into view with staggered delay, retro coral and ivory on jet black, neon-script CTA. Flips between two taglines on a loop.
The code
<section class="hs-anh" aria-label="Hero">
<div class="hs-anh-inner">
<span class="hs-anh-eye">— OPEN 24 HRS —</span>
<h2>
<span class="hs-anh-w" style="--d: 0">Late</span>
<span class="hs-anh-w" style="--d: 1">night</span>
<span class="hs-anh-w" style="--d: 2">tunes,</span>
<br />
<span class="hs-anh-w" style="--d: 3">made</span>
<span class="hs-anh-w" style="--d: 4">for</span>
<span class="hs-anh-w hs-anh-em" style="--d: 5">cruising.</span>
</h2>
<p class="hs-anh-sub">A radio station that never sleeps and never sells you anything.</p>
<a class="hs-anh-cta" href="#tune">Tune in</a>
</div>
</section> <section class="hs-anh" aria-label="Hero">
<div class="hs-anh-inner">
<span class="hs-anh-eye">— OPEN 24 HRS —</span>
<h2>
<span class="hs-anh-w" style="--d: 0">Late</span>
<span class="hs-anh-w" style="--d: 1">night</span>
<span class="hs-anh-w" style="--d: 2">tunes,</span>
<br />
<span class="hs-anh-w" style="--d: 3">made</span>
<span class="hs-anh-w" style="--d: 4">for</span>
<span class="hs-anh-w hs-anh-em" style="--d: 5">cruising.</span>
</h2>
<p class="hs-anh-sub">A radio station that never sleeps and never sells you anything.</p>
<a class="hs-anh-cta" href="#tune">Tune in</a>
</div>
</section>.hs-anh {
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 56px);
background: #0d0d0d;
font-family: 'Inter', system-ui, sans-serif;
color: #fdf3e0;
box-sizing: border-box;
}
.hs-anh-inner { max-width: 720px; text-align: center; }
.hs-anh-eye {
display: inline-block; font-family: 'Courier New', monospace;
font-size: 12px; letter-spacing: 0.24em; color: #ff7461; margin-bottom: 26px;
}
.hs-anh h2 {
margin: 0 0 22px;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(38px, 6vw, 68px);
font-weight: 700; letter-spacing: -0.015em; line-height: 1.05;
color: #fdf3e0;
}
.hs-anh-w {
display: inline-block; opacity: 0;
animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) forwards;
animation-delay: calc(var(--d) * 0.12s);
}
.hs-anh-em { color: #ff7461; font-style: italic; }
@keyframes hs-anh-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hs-anh-sub { font-size: 15px; line-height: 1.55; color: #b8a890; margin: 0 auto 28px; max-width: 420px;
opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}
.hs-anh-cta {
display: inline-block; padding: 14px 28px;
background: transparent; color: #ff7461;
border: 2px solid #ff7461; border-radius: 999px;
text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 1.1s forwards;
transition: background 0.18s, color 0.18s;
}
.hs-anh-cta:hover { background: #ff7461; color: #0d0d0d; box-shadow: 0 0 22px rgba(255,116,97,0.5); }
@media (prefers-reduced-motion: reduce) {
.hs-anh-w, .hs-anh-sub, .hs-anh-cta { animation: none; opacity: 1; }
} .hs-anh {
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 56px);
background: #0d0d0d;
font-family: 'Inter', system-ui, sans-serif;
color: #fdf3e0;
box-sizing: border-box;
}
.hs-anh-inner { max-width: 720px; text-align: center; }
.hs-anh-eye {
display: inline-block; font-family: 'Courier New', monospace;
font-size: 12px; letter-spacing: 0.24em; color: #ff7461; margin-bottom: 26px;
}
.hs-anh h2 {
margin: 0 0 22px;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(38px, 6vw, 68px);
font-weight: 700; letter-spacing: -0.015em; line-height: 1.05;
color: #fdf3e0;
}
.hs-anh-w {
display: inline-block; opacity: 0;
animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) forwards;
animation-delay: calc(var(--d) * 0.12s);
}
.hs-anh-em { color: #ff7461; font-style: italic; }
@keyframes hs-anh-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hs-anh-sub { font-size: 15px; line-height: 1.55; color: #b8a890; margin: 0 auto 28px; max-width: 420px;
opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}
.hs-anh-cta {
display: inline-block; padding: 14px 28px;
background: transparent; color: #ff7461;
border: 2px solid #ff7461; border-radius: 999px;
text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 1.1s forwards;
transition: background 0.18s, color 0.18s;
}
.hs-anh-cta:hover { background: #ff7461; color: #0d0d0d; box-shadow: 0 0 22px rgba(255,116,97,0.5); }
@media (prefers-reduced-motion: reduce) {
.hs-anh-w, .hs-anh-sub, .hs-anh-cta { animation: none; opacity: 1; }
}