OdysseyUI

Typewriter

Animated typewriter effect with multi-sequence support, natural keystroke variance, delete animation, and auto-loop.

Installation

Usage

import { Typewriter } from '@/components/odysseyui/typewriter';

export default function Page() {
  return (
    <Typewriter
      sequences={[
        { text: 'Full-Stack Developer', deleteAfter: true },
        { text: 'UI/UX Enthusiast', deleteAfter: true },
        { text: 'Open to remote work', deleteAfter: false },
      ]}
      typingSpeed={100}
      deleteSpeed={40}
      pauseBeforeDelete={1600}
      loopDelay={1200}
      autoLoop={true}
      naturalVariance={true}
      className="font-mono text-4xl"
    />
  );
}

How It Works

  • Pass a sequences array where each item has a text string and optional deleteAfter / pauseAfter flags.
  • When deleteAfter: true, the text is erased before moving to the next sequence.
  • When deleteAfter: false (or omitted on the last item), the text stays and the sequence advances or loops.
  • naturalVariance adds random per-character timing to mimic real typing rhythm.
  • The blinking cursor is rendered via @keyframes blink in your global styles.

API Reference

Typewriter

PropTypeDefault
sequences?
TypewriterSequence[]
Default 3-sequence demo
typingSpeed?
number
50
deleteSpeed?
number
30
startDelay?
number
200
pauseBeforeDelete?
number
1000
loopDelay?
number
1000
autoLoop?
boolean
true
naturalVariance?
boolean
true
className?
string
-

TypewriterSequence

PropTypeDefault
text
string
-
deleteAfter?
boolean
-
pauseAfter?
number
-

Built by Shr3kx & iam-sahil. The source code is available on GitHub.

Last updated: 3/26/2026