React Typing Text

Typewriter effects that don't make you want to throw your computer. Realistic typing speeds with proper cursor timing that actually looks like someone typing, not a robot having a breakdown. Built with Motion, TypeScript, and shadcn/ui.

Motion

Framer Motion

Trying to implement text animations?

Join our Discord community for help from other developers.

Ever seen a "typing" effect that types at 300 WPM like a caffeinated secretary? Most typewriter animations either go way too fast (unreadable) or painfully slow (watching grass grow). This component types at human speeds with realistic pauses, backspacing, and cursor behavior that actually looks like someone is typing.

Realistic typewriter effects with human timing

Text that types naturally with proper cursor blinking:

Loading component...

'use client';import * as React from 'react';import { motion, useInView, type UseInViewOptions } from 'motion/react';import { cn } from '@/lib/utils';function CursorBlinker({ className }: { className?: string }) {  return (    <motion.span      data-slot="cursor-blinker"      variants={{        blinking: {          opacity: [0, 0, 1, 1],          transition: {            duration: 1,            repeat: Infinity,            repeatDelay: 0,            ease: 'linear',            times: [0, 0.5, 0.5, 1],          },        },      }}      animate="blinking"      className={cn(        'inline-block h-5 w-[1px] translate-y-1 bg-black dark:bg-white',        className,      )}    />  );}type TypingTextProps = Omit<React.ComponentProps<'span'>, 'children'> & {  duration?: number;  delay?: number;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  cursor?: boolean;  loop?: boolean;  holdDelay?: number;  text: string | string[];  cursorClassName?: string;  animateOnChange?: boolean;};function TypingText({  ref,  duration = 100,  delay = 0,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  cursor = false,  loop = false,  holdDelay = 1000,  text,  cursorClassName,  animateOnChange = true,  ...props}: TypingTextProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;  const [started, setStarted] = React.useState(false);  const [displayedText, setDisplayedText] = React.useState<string>('');  React.useEffect(() => {    // Reset animation when text changes (if animateOnChange is true)    if (animateOnChange) {      setStarted(false);      setDisplayedText('');    }    if (isInView) {      const timeoutId = setTimeout(() => {        setStarted(true);      }, delay);      return () => clearTimeout(timeoutId);    } else {      const timeoutId = setTimeout(() => {        setStarted(true);      }, delay);      return () => clearTimeout(timeoutId);    }  }, [isInView, delay, ...(animateOnChange ? [text] : [])]);  React.useEffect(() => {    if (!started) return;    const timeoutIds: Array<ReturnType<typeof setTimeout>> = [];    const texts: string[] = typeof text === 'string' ? [text] : text;    const typeText = (str: string, onComplete: () => void) => {      let currentIndex = 0;      const type = () => {        if (currentIndex <= str.length) {          setDisplayedText(str.substring(0, currentIndex));          currentIndex++;          const id = setTimeout(type, duration);          timeoutIds.push(id);        } else {          onComplete();        }      };      type();    };    const eraseText = (str: string, onComplete: () => void) => {      let currentIndex = str.length;      const erase = () => {        if (currentIndex >= 0) {          setDisplayedText(str.substring(0, currentIndex));          currentIndex--;          const id = setTimeout(erase, duration);          timeoutIds.push(id);        } else {          onComplete();        }      };      erase();    };    const animateTexts = (index: number) => {      typeText(texts[index] ?? '', () => {        const isLast = index === texts.length - 1;        if (isLast && !loop) {          return;        }        const id = setTimeout(() => {          eraseText(texts[index] ?? '', () => {            const nextIndex = isLast ? 0 : index + 1;            animateTexts(nextIndex);          });        }, holdDelay);        timeoutIds.push(id);      });    };    animateTexts(0);    return () => {      timeoutIds.forEach(clearTimeout);    };  }, [text, duration, started, loop, holdDelay]);  return (    <span ref={localRef} data-slot="typing-text" {...props}>      <motion.span>{displayedText}</motion.span>      {cursor && <CursorBlinker className={cursorClassName} />}    </span>  );}export { TypingText, type TypingTextProps };

Built with TypeScript and shadcn/ui, using Motion for smooth cursor animations in React applications. Characters appear at readable speeds, the cursor blinks naturally, and you can cycle through multiple phrases with realistic erase-and-retype behavior.

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={["Build faster", "Ship better", "Scale easier"]}
  duration={80}
  cursor={true}
  loop={true}
  holdDelay={2000}
/>;

Why most typing effects suck

Most developers just animate characters appearing with a fixed delay, like a broken printer. Real typing has variation—people don't type every letter at exactly the same speed. Some letters take longer (like reaching for 'p' after 'a'), and people pause at punctuation.

This React component uses realistic base timing (80-120ms per character, like actual human typing) with proper cursor behavior. The cursor blinks independently from typing, stops blinking while typing (like real terminals), and resumes after pauses. When cycling through text, it erases at a faster speed than typing (like backspacing), then starts the next phrase.

Most importantly, the timing is tuned for readability. Fast enough that users don't get bored, slow enough that they can follow along. No more robot typing or snail-pace reveals.

Features

Character-by-character typing with human-speed timing for React applications
Realistic cursor that blinks independently and stops during active typing
Multiple text cycling with backspace erase and natural transition delays
In-view detection so typing starts when users actually see the component
Complete TypeScript support with configurable timing and loop controls
Free open source component that works seamlessly with shadcn/ui themes
Optimized performance with proper cleanup for Next.js applications

API Reference

TypingText

Typewriter animation with realistic human timing and cursor behavior.

Prop	Type	Default	Description
`text`	`string \| string[]`	required	Text or array to type through
`duration`	`number`	`100`	Milliseconds per character
`delay`	`number`	`0`	Initial delay before typing starts
`cursor`	`boolean`	`false`	Show blinking cursor
`cursorClassName`	`string`	-	Custom cursor styling
`loop`	`boolean`	`false`	Cycle through text array
`holdDelay`	`number`	`2000`	Pause before erasing (ms)
`eraseDelay`	`number`	`50`	Speed of backspacing (ms)
`inView`	`boolean`	`false`	Only animate when visible
`inViewMargin`	`string`	`"0px"`	Viewport margin for trigger
`inViewOnce`	`boolean`	`true`	Animate only once
`animateOnChange`	`boolean`	`true`	Reset on text prop change
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLSpanElement>`	-	Standard span attributes

Realistic Typing Speeds

Timing that matches human typing patterns:

Speed	Duration (ms)	WPM Equivalent	Best For
Slow	150-200	20-30 WPM	Dramatic reveals, code demos
Normal	80-120	40-60 WPM	Headlines, taglines
Fast	50-80	60-80 WPM	Quick updates, notifications
Rapid	20-50	80+ WPM	Real-time feeds, chat

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.

Integration with other components

Perfect for hero sections in Card layouts or dynamic headings in Sheet overlays within React applications. Works great with Button components for call-to-action sequences in Next.js projects.

For terminal-style interfaces, combine with Code Block for command demonstrations or Badge for status updates. This free open source component pairs well with Progress for loading states and Avatar for chat interfaces, all with complete TypeScript integration.

Realistic typewriter effects with human timing

Installation

Usage

Why most typing effects suck

Features

API Reference

TypingText

Realistic Typing Speeds

Common gotchas

Integration with other components

Questions developers actually ask

On this page

React Typing Text

Reacttyping-text

How do I make the typing look more human and less robotic?

Can this handle multi-line text or paragraphs?

Can I pause or control the typing programmatically?

Can I customize the cursor appearance and behavior?

Does this impact performance with long text?

Is typing text accessible for screen readers?

How does this work on mobile devices?

On this page