Skip to main content
A dynamic typewriter component that simulates human typing with customizable sequences, deletion effects, and natural variance.

​
Installation

npx shadcn@latest add @kokonutui/type-writer

​
Usage

import TypewriterTitle from "@/components/kokonutui/type-writer";

export default function Example() {
  return (
    <TypewriterTitle
      sequences={[
        { text: "Hello World", deleteAfter: true },
        { text: "Welcome", deleteAfter: false }
      ]}
      typingSpeed={50}
      autoLoop={true}
    />
  );
}

​
Props

​
sequences
TypewriterSequence[]
Array of text sequences to display
​
typingSpeed
number
default:"50"
Speed of typing in milliseconds per character
​
startDelay
number
default:"200"
Initial delay before animation starts (ms)
​
autoLoop
boolean
default:"true"
Whether to automatically loop through sequences
​
loopDelay
number
default:"1000"
Delay before restarting the loop (ms)
​
deleteSpeed
number
default:"30"
Speed of character deletion (ms)
​
pauseBeforeDelete
number
default:"1000"
Pause duration before deleting text (ms)
​
naturalVariance
boolean
default:"true"
Add natural human-like typing variance

​
TypewriterSequence Type

type TypewriterSequence = {
  text: string;           // Text to display
  deleteAfter?: boolean;  // Delete text after displaying
  pauseAfter?: number;    // Custom pause duration (ms)
};

​
Features

  • Natural Typing: Simulates human typing with random pauses and speed variations
  • Custom Sequences: Define multiple text sequences with individual behaviors
  • Auto Loop: Automatically cycle through sequences
  • Blinking Cursor: Animated cursor effect
  • Flexible Timing: Customizable typing, deletion, and pause speeds

​
Dependencies

  • motion/react - Animation library
  • react - Hooks (useState, useRef, useEffect)

Build docs developers (and LLMs) love

Get started for freeTalk to us