Typing Text Effect

A typing text effect built with pure HTML and CSS that mimics the appearance of characters being typed one by one, creating a terminal-style or writer-style animation without relying on JavaScript or external libraries.

Usage

This component is ideal for situations where text should feel progressive and narrative, such as hero taglines, onboarding messages, code-style banners, loading statements, or storytelling headers that benefit from a time based reveal.

Implementation

The typing illusion is created using CSS width control, overflow handling, and step based keyframe animations, allowing characters to appear sequentially while a blinking cursor effect can be simulated using borders or pseudo-elements.

HTML

<h2 class="ss-text">Typing Effect</h2>

<h2 class="ss-text">Typing Effect</h2>

CSS

.ss-text{
  font-size:32px;
  width:13ch;
  white-space:nowrap;
  overflow:hidden;
  border-right:3px solid #2563eb;
  animation:typing 2s steps(13), blink .7s infinite;
}

@keyframes typing{
  from{ width:0; }
}

@keyframes blink{
  50%{ border-color:transparent; }
}

.ss-text{
  font-size:32px;
  width:13ch;
  white-space:nowrap;
  overflow:hidden;
  border-right:3px solid #2563eb;
  animation:typing 2s steps(13), blink .7s infinite;
}

@keyframes typing{
  from{ width:0; }
}

@keyframes blink{
  50%{ border-color:transparent; }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Simulates character-by-character typing
• Can include a blinking cursor indicator
• Best suited for short to medium text lines
• Designed for narrative or terminal style UI

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.