Headline Underline Sweep on First View

Overview

The Headline Underline Sweep on First View is a simple but highly effective hero animation pattern: the heading is immediately readable, and a short SVG line animates underneath it moments later. This sequence keeps the layout calm, reinforces hierarchy, and adds just enough motion to make the brand feel intentional.

Because the underline is vector-based, it stays crisp on every screen size and can be tuned precisely to match the width, timing, stroke weight, and easing of your typography. It is especially useful for hero and brand surfaces where you want a premium feel without overwhelming the user on load.

Why this animation works

• Text-first readability: the headline is visible before motion begins, so the message is never delayed.
• Lightweight motion: a single line animation adds refinement without clutter.
• Strong brand signal: underline timing can be matched to the rest of the interface for a cohesive identity.
• Responsive by nature: SVG scales cleanly across mobile, tablet, and desktop.

Best use cases

This pattern performs well in hero sections, landing page intros, campaign pages, and product announcement surfaces. It is also a good fit for editorial headers, feature callouts, and brand storytelling sections where you want a controlled, elegant reveal rather than a large motion sequence.

Animation concept

The sequence is intentionally minimal:

1. The heading loads and becomes fully readable.
2. After a short delay, the underline begins drawing from left to right.
3. The line settles into its final position beneath the title.

This delay is important. When the underline waits until the text is already legible, the animation feels supportive rather than performative. That makes the experience more usable and more premium at the same time.

Implementation approach

A clean implementation uses an inline SVG placed directly below the heading. The line can be animated with stroke-dasharray and stroke-dashoffset, which creates the effect of the line being drawn across the screen. You can trigger the animation on page load, on intersection, or when the hero enters view.

Below is a compact example of the technique:

<div class="hero-title">
  <h1>Design that moves with purpose</h1>
  <svg viewBox="0 0 320 20" aria-hidden="true" class="underline-svg">
    <line x1="0" y1="10" x2="320" y2="10" />
  </svg>
</div>

.underline-svg {
  display: block;
  width: 100%;
  height: 20px;
  overflow: visible;
}

.underline-svg line {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: underline-draw 700ms ease-out 350ms forwards;
}

@keyframes underline-draw {
  to {
    stroke-dashoffset: 0;
  }
}

This approach is easy to adapt. If the underline should be shorter than the heading width, set the SVG viewBox and line length to the desired value. If the heading wraps on smaller screens, you can keep the underline fixed beneath the first line or position it relative to the text container.

Design tips

• Keep the delay short: 250–500ms is usually enough to let the text register before motion begins.
• Match the line to the type: use a stroke weight that feels balanced with the font size and font weight.
• Use rounded ends: stroke-linecap: round often gives the underline a softer, more finished look.
• Respect hierarchy: the underline should support the heading, not compete with it.
• Consider brand color: a subtle accent color can make the sweep feel unique without becoming loud.

Accessibility considerations

Because the content is readable before the animation starts, this pattern is naturally more accessible than text-reveal effects that delay the headline itself. Still, it is best to keep motion understated and provide a reduced-motion experience for users who prefer less animation.

@media (prefers-reduced-motion: reduce) {
  .underline-svg line {
    animation: none;
    stroke-dashoffset: 0;
  }
}

This preserves the visual structure of the hero while removing unnecessary motion. It is a small change that improves usability and makes the interaction more inclusive.

Common variations

You can extend this SVG animation example in several directions while keeping the same basic idea:

• Double underline: animate two lines with a slight offset for a more editorial feel.
• Curved sweep: use a path instead of a straight line for a more expressive brand signature.
• Gradient stroke: add a linear gradient to the line for a more luminous, modern finish.
• Accent follow-through: pair the underline with a tiny dot or spark that lands at the end of the stroke.

These variations can make the effect feel custom while preserving the same clean first-view behavior.

When to use this pattern

Use a headline underline sweep when your page needs a restrained but memorable entry. It works particularly well for premium brands, SaaS landing pages, design portfolios, creative agencies, and product launches where the hero must feel dynamic without sacrificing clarity.

If your hero already contains a lot of content, motion, or imagery, keep the underline animation very short and understated. If the surface is minimal, the sweep can become a more prominent brand gesture. The key is to let the motion reinforce the composition, not dominate it.

Final takeaway

The Headline Underline Sweep on First View is a small SVG animation with outsized impact. It maintains immediate readability, adds polish at the exact right moment, and gives hero sections a refined brand signature that feels modern, deliberate, and easy to scale across layouts.