Typewriter Effect

text

Dynamic character-by-character typewriter loop animation with blinking cursor.

#text#typewriter#loop#animation

Live Interactive Preview

Build with precision

Component Source Code

Select language in the dropdown

TypewriterEffect.tsx

1'use client';
2
3import React, { useState, useEffect } from 'react';
4
5export default function TypewriterEffect() {
6  const words = ['Modern Interfaces', 'Spatial Components', 'Tailwind CSS V4', 'Clean Interactions'];
7  const [wordIdx, setWordIdx] = useState(0);
8  const [charIdx, setCharIdx] = useState(0);
9  const [isDeleting, setIsDeleting] = useState(false);
10
11  useEffect(() => {
12    const currentWord = words[wordIdx];
13    const typingSpeed = isDeleting ? 40 : 80;
14
15    const timer = setTimeout(() => {
16      if (!isDeleting && charIdx < currentWord.length) {
17        setCharIdx((prev) => prev + 1);
18      } else if (isDeleting && charIdx > 0) {
19        setCharIdx((prev) => prev - 1);
20      } else if (!isDeleting && charIdx === currentWord.length) {
21        setTimeout(() => setIsDeleting(true), 1500);
22      } else if (isDeleting && charIdx === 0) {
23        setIsDeleting(false);
24        setWordIdx((prev) => (prev + 1) % words.length);
25      }
26    }, typingSpeed);
27
28    return () => clearTimeout(timer);
29  }, [charIdx, isDeleting, wordIdx]);
30
31  return (
32    <div className="flex flex-col items-center justify-center p-6 text-center">
33      <div className="text-sm font-semibold uppercase tracking-widest text-slate-400 mb-2">Build with precision</div>
34      <h2 className="text-xl sm:text-3xl font-extrabold text-slate-900 dark:text-white flex items-center justify-center min-h-[44px]">
35        <span>{words[wordIdx].substring(0, charIdx)}</span>
36        <span className="ml-1 inline-block h-6 sm:h-8 w-[3px] bg-blue-500 animate-[pulse_0.8s_infinite]" />
37      </h2>
38    </div>
39  );
40}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/TypewriterEffect.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import TypewriterEffect from '@/components/text/TypewriterEffect';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <TypewriterEffect />
7    </main>
8  );
9}