React Typing Text Animation

Advanced typewriter effect with variable speed, colored text, GSAP cursor animations. Perfect for React applications requiring realistic typing experiences.

Motion

GSAP

Trying to implement typing text animations?

Join our Discord community for help from other developers.

Most typing animations are predictable and mechanical—fixed speeds with basic cursors that don't feel natural. This component creates realistic typing experiences with variable speeds, smooth GSAP-powered cursor animations, multi-colored text support, and intersection observer triggers for performance optimization.

Advanced typewriter effects with variable speed and colors

Text that types with variable timing, colored sequences, and smooth cursor animations:

Loading component...

'use client';import { ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';import { gsap } from 'gsap';interface TypingTextProps {  className?: string;  showCursor?: boolean;  hideCursorWhileTyping?: boolean;  cursorCharacter?: string | React.ReactNode;  cursorBlinkDuration?: number;  cursorClassName?: string;  text: string | string[];  as?: ElementType;  typingSpeed?: number;  initialDelay?: number;  pauseDuration?: number;  deletingSpeed?: number;  loop?: boolean;  textColors?: string[];  variableSpeed?: { min: number; max: number };  onSentenceComplete?: (sentence: string, index: number) => void;  startOnVisible?: boolean;  reverseMode?: boolean;}const TypingText = ({  text,  as: Component = 'div',  typingSpeed = 50,  initialDelay = 0,  pauseDuration = 2000,  deletingSpeed = 30,  loop = true,  className = '',  showCursor = true,  hideCursorWhileTyping = false,  cursorCharacter = '|',  cursorClassName = '',  cursorBlinkDuration = 0.5,  textColors = [],  variableSpeed,  onSentenceComplete,  startOnVisible = false,  reverseMode = false,  ...props}: TypingTextProps & React.HTMLAttributes<HTMLElement>) => {  const [displayedText, setDisplayedText] = useState('');  const [currentCharIndex, setCurrentCharIndex] = useState(0);  const [isDeleting, setIsDeleting] = useState(false);  const [currentTextIndex, setCurrentTextIndex] = useState(0);  const [isVisible, setIsVisible] = useState(!startOnVisible);  const cursorRef = useRef<HTMLSpanElement>(null);  const containerRef = useRef<HTMLElement>(null);  const textArray = useMemo(() => (Array.isArray(text) ? text : [text]), [text]);  const getRandomSpeed = useCallback(() => {    if (!variableSpeed) return typingSpeed;    const { min, max } = variableSpeed;    return Math.random() * (max - min) + min;  }, [variableSpeed, typingSpeed]);  const getCurrentTextColor = () => {    if (textColors.length === 0) return 'currentColor';    return textColors[currentTextIndex % textColors.length];  };  useEffect(() => {    if (!startOnVisible || !containerRef.current) return;    const observer = new IntersectionObserver(      entries => {        entries.forEach(entry => {          if (entry.isIntersecting) {            setIsVisible(true);          }        });      },      { threshold: 0.1 }    );    observer.observe(containerRef.current);    return () => observer.disconnect();  }, [startOnVisible]);  useEffect(() => {    if (showCursor && cursorRef.current) {      gsap.set(cursorRef.current, { opacity: 1 });      gsap.to(cursorRef.current, {        opacity: 0,        duration: cursorBlinkDuration,        repeat: -1,        yoyo: true,        ease: 'power2.inOut'      });    }  }, [showCursor, cursorBlinkDuration]);  useEffect(() => {    if (!isVisible) return;    let timeout: NodeJS.Timeout;    const currentText = textArray[currentTextIndex];    const processedText = reverseMode ? currentText.split('').reverse().join('') : currentText;    const executeTypingAnimation = () => {      if (isDeleting) {        if (displayedText === '') {          setIsDeleting(false);          if (currentTextIndex === textArray.length - 1 && !loop) {            return;          }          if (onSentenceComplete) {            onSentenceComplete(textArray[currentTextIndex], currentTextIndex);          }          setCurrentTextIndex(prev => (prev + 1) % textArray.length);          setCurrentCharIndex(0);          timeout = setTimeout(() => {}, pauseDuration);        } else {          timeout = setTimeout(() => {            setDisplayedText(prev => prev.slice(0, -1));          }, deletingSpeed);        }      } else {        if (currentCharIndex < processedText.length) {          timeout = setTimeout(            () => {              setDisplayedText(prev => prev + processedText[currentCharIndex]);              setCurrentCharIndex(prev => prev + 1);            },            variableSpeed ? getRandomSpeed() : typingSpeed          );        } else if (textArray.length > 1) {          timeout = setTimeout(() => {            setIsDeleting(true);          }, pauseDuration);        }      }    };    if (currentCharIndex === 0 && !isDeleting && displayedText === '') {      timeout = setTimeout(executeTypingAnimation, initialDelay);    } else {      executeTypingAnimation();    }    return () => clearTimeout(timeout);  }, [    currentCharIndex,    displayedText,    isDeleting,    typingSpeed,    deletingSpeed,    pauseDuration,    textArray,    currentTextIndex,    loop,    initialDelay,    isVisible,    reverseMode,    variableSpeed,    onSentenceComplete,    getRandomSpeed  ]);  const shouldHideCursor =    hideCursorWhileTyping && (currentCharIndex < textArray[currentTextIndex].length || isDeleting);  return createElement(    Component,    {      ref: containerRef,      className: `inline-block whitespace-pre-wrap tracking-tight ${className}`,      ...props    },    <span className="inline" style={{ color: getCurrentTextColor() }}>      {displayedText}    </span>,    showCursor && (      <span        ref={cursorRef}        className={`inline-block opacity-100 ${shouldHideCursor ? 'hidden' : ''} ${          cursorCharacter === '|'             ? `h-5 w-[1px] translate-y-1 bg-foreground ${cursorClassName}`             : `ml-1 ${cursorClassName}`        }`}      >        {cursorCharacter === '|' ? '' : cursorCharacter}      </span>    )  );};export default TypingText;

Built with TypeScript, GSAP, and Motion for React applications, featuring intersection observer triggers, variable typing speeds, and multi-colored text arrays. The cursor uses smooth GSAP animations and can be customized with both character and bar styles.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/typing-text.json

npx shadcn@latest add https://www.shadcn.io/registry/typing-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/typing-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/typing-text.json

Usage

import TypingText from "@/components/text/typing-text";

<TypingText
  text={["Beautiful components for React", "Built with shadcn/ui", "Ship faster than ever!"]}
  typingSpeed={75}
  pauseDuration={1500}
  showCursor={true}
  cursorCharacter="|"
  className="text-4xl font-bold"
  textColors={['#3b82f6', '#8b5cf6', '#06b6d4']}
  variableSpeed={{ min: 50, max: 120 }}
/>

Why most typing effects feel mechanical

Most developers use fixed timing with basic cursors—predictable animations that don't capture the natural variation of human typing. Real typing has inconsistent speeds, color emphasis, and smooth cursor behavior that traditional components miss.

This React component uses variable speed ranges to simulate natural typing rhythms, GSAP for smooth cursor animations, and support for multi-colored text arrays. The intersection observer ensures animations trigger only when visible, while the flexible cursor system supports both character and bar styles.

The key insight: natural typing isn't uniform. When speed varies organically and colors emphasize different concepts, it creates more engaging and human-feeling text reveals that hold user attention.

Features

Variable speed typing with configurable min/max ranges for natural rhythm variation
GSAP-powered smooth cursor animations with customizable blinking duration and easing
Multi-colored text support with automatic color cycling for different text segments
Intersection observer integration for performance-optimized scroll-triggered animations
Flexible cursor system supporting both character (|, _, █) and bar styles
Reverse typing mode and sentence completion callbacks for advanced interactions
Complete TypeScript support with extensive prop customization options
Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

TypingText

Advanced typewriter animation with variable speed, colors, and GSAP cursor animations.

Prop	Type	Default	Description
`text`	`string \| string[]`	required	Text or array to type through
`typingSpeed`	`number`	`50`	Base milliseconds per character
`initialDelay`	`number`	`0`	Initial delay before typing starts
`pauseDuration`	`number`	`2000`	Pause before erasing (ms)
`deletingSpeed`	`number`	`30`	Speed of backspacing (ms)
`loop`	`boolean`	`true`	Cycle through text array
`showCursor`	`boolean`	`true`	Show blinking cursor
`cursorCharacter`	`string \| React.ReactNode`	`"\|"`	Cursor character or custom element
`cursorClassName`	`string`	-	Custom cursor styling
`cursorBlinkDuration`	`number`	`0.5`	GSAP cursor blink duration (s)
`hideCursorWhileTyping`	`boolean`	`false`	Hide cursor during typing
`textColors`	`string[]`	`[]`	Colors for each text in array
`variableSpeed`	`{min: number, max: number}`	-	Random speed range
`startOnVisible`	`boolean`	`false`	Start only when in viewport
`reverseMode`	`boolean`	`false`	Type text in reverse
`onSentenceComplete`	`(sentence: string, index: number) => void`	-	Callback when sentence finishes
`as`	`ElementType`	`'div'`	HTML element to render
`className`	`string`	-	Additional CSS classes

Cursor Character Options

Different cursor styles for various aesthetics:

Character	Style	Best For	Example
`"\|"`	Thin bar (default)	Modern, clean interfaces	`cursorCharacter="\|"`
`"_"`	Underscore	Retro, terminal style	`cursorCharacter="_"`
`"█"`	Block	Bold, attention-grabbing	`cursorCharacter="█"`
`"▋"`	Half block	Balanced visibility	`cursorCharacter="▋"`
Custom	Any character/emoji	Creative, playful	`cursorCharacter="🔥"`

Variable Speed Configuration

Natural typing rhythm with randomized timing:

Setting	Configuration	Effect	Best For
Consistent	`typingSpeed={75}`	Fixed 75ms per char	Predictable, professional
Subtle Variation	`variableSpeed={{min: 60, max: 90}}`	±15ms variance	Slight humanization
Natural	`variableSpeed={{min: 40, max: 120}}`	±40ms variance	Human-like rhythm
Dramatic	`variableSpeed={{min: 20, max: 200}}`	Wide variance	Expressive, artistic

Common gotchas

Typing feels robotic: Default 100ms works for most cases in React applications. Add slight randomization by varying duration ±20ms, or use different speeds for punctuation vs letters with TypeScript logic.

Cursor doesn't align properly: The cursor uses absolute positioning relative to text height in JavaScript applications. If using custom fonts, you might need to adjust cursor height or line positioning.

Text cycles too quickly: Default 2-second hold gives users time to read in Next.js projects. Longer text needs longer holds (3-4 seconds), shorter text can use 1-1.5 seconds for snappy cycles.

Animation starts before users see it: Always use inView={true} unless you want immediate typing on page load. Otherwise users miss the effect entirely.

Memory leaks with unmounting: The component cleans up timeouts automatically, but avoid rapidly mounting/unmounting typing components in React applications. Cache them or use conditional visibility instead.

React Typing Text Animation

Advanced typewriter effects with variable speed and colors

Installation

Usage

Why most typing effects feel mechanical

Features

API Reference

TypingText

Cursor Character Options

Variable Speed Configuration

Common gotchas

Text Generate Effect

Writing Text

Splitting Text

Counting Number

Decrypted Text

Shuffle

Questions developers actually ask

On this page

React Typing Text Animation