Animated Text Typing Effect

This component creates a realistic typing animation effect using only CSS animations. It’s perfect for hero sections, landing pages, or anywhere you want to grab the user’s attention with dynamic text.

Features

• Pure CSS Animation: No JavaScript required for basic implementation
• Realistic Typing Effect: Uses CSS steps() function for authentic typing
• Blinking Cursor: Simulates a typewriter cursor with blinking animation
• Responsive: Adapts to different screen sizes
• Dark Mode Support: Adjusts colors for dark mode
• Customizable: Easy to modify text, speed, and styling

Usage

To use this effect, simply include the HTML and CSS in your project. The key is using the steps() timing function in the CSS animation to create the character-by-character typing effect.

Customization

You can customize the following aspects:

• Text Content: Change the text inside the .typing-text element
• Typing Speed: Adjust the duration of the typing animation (3.5s in the example)
• Cursor Style: Modify the border-right properties for different cursor appearance
• Colors: Change text and cursor colors for both light and dark modes
• Font: Adjust font-size, font-weight, and other font properties
• Animation Steps: Modify the steps value in steps(40, end) to match the number of characters

Browser Support

This component uses standard CSS animations and the steps() function, supported in all modern browsers and IE10+.

Advanced Implementation

For more complex scenarios like:

• Multiple sentences
• Looping animations
• Start/stop controls
• Dynamic text changes

You would need to implement JavaScript logic. A basic structure for such implementation might include:

// Example of JavaScript-enhanced typing effect
const textElement = document.querySelector('.typing-text');
const texts = [
  "Welcome to our amazing website!",
  "Discover incredible features.",
  "Join our community today."
];

let textIndex = 0;
let charIndex = 0;
let isDeleting = false;

function type() {
  const currentText = texts[textIndex];
  
  if (isDeleting) {
    // Remove characters
    textElement.textContent = currentText.substring(0, charIndex - 1);
    charIndex--;
  } else {
    // Add characters
    textElement.textContent = currentText.substring(0, charIndex + 1);
    charIndex++;
  }
  
  // Calculate typing speed
  let speed = 100;
  if (isDeleting) speed /= 2;
  
  // Check if word is complete
  if (!isDeleting && charIndex === currentText.length) {
    // Pause at end
    speed = 2000;
    isDeleting = true;
  } else if (isDeleting && charIndex === 0) {
    // Move to next text
    isDeleting = false;
    textIndex++;
    if (textIndex === texts.length) textIndex = 0;
    speed = 500;
  }
  
  setTimeout(type, speed);
}

// Start the animation
document.addEventListener('DOMContentLoaded', type);

This JavaScript version provides more control and can handle multiple sentences with looping.