Text Type

A text typing animation component with GSAP. Features typing, deleting, looping, and customizable cursor effects. Perfect for hero sections and landing pages.

Open in

Installation

npm install gsap react

pnpm install gsap react

yarn add gsap react

bun add gsap react

'use client';

import { TextType } from '@/components/ui/text-type';

export default function TextTypeDemo() {
  return (
    <div className="flex min-h-[200px] items-center justify-center">
      <div className="text-center">
        <h1 className="text-foreground text-3xl font-bold md:text-5xl">
          <TextType
            text={['Text typing effect', 'for your websites', 'Happy coding!']}
            typingSpeed={75}
            pauseDuration={1500}
            showCursor={true}
            cursorCharacter="|"
            className="text-foreground"
          />
        </h1>
      </div>
    </div>
  );
}

'use client';import { TextType } from '@/components/ui/text-type';export default function TextTypeDemo() {  return (    <div className="flex min-h-[200px] items-center justify-center">      <div className="text-center">        <h1 className="text-foreground text-3xl font-bold md:text-5xl">          <TextType            text={['Text typing effect', 'for your websites', 'Happy coding!']}            typingSpeed={75}            pauseDuration={1500}            showCursor={true}            cursorCharacter="|"            className="text-foreground"          />        </h1>      </div>    </div>  );}

Usage

import { TextType } from "@/components/ui/text-type";

export default function MyComponent() {
  return (
    <div className="text-4xl font-bold">
      <TextType
        text={["Text typing effect", "for your websites", "Happy coding!"]}
        typingSpeed={75}
        pauseDuration={1500}
        showCursor={true}
        cursorCharacter="|"
      />
    </div>
  );
}

Features

⌨️ Typing Animation: Smooth character-by-character typing effect
🗑️ Auto Delete: Automatically deletes text before typing next phrase
🔄 Looping: Seamlessly loops through multiple text strings
🎨 Customizable Cursor: Custom cursor character and blink animation
⚡ GSAP Powered: Smooth animations powered by GSAP
📱 Responsive: Works on all screen sizes
🎯 Intersection Observer: Start animation when element is visible
🎨 Color Support: Custom colors for each text string

Props

Prop	Type	Default	Description
`text`	`string \| string[]`	Required	Text or array of texts to type
`typingSpeed`	`number`	`50`	Speed of typing in milliseconds
`deletingSpeed`	`number`	`30`	Speed of deleting in milliseconds
`pauseDuration`	`number`	`2000`	Pause between typing and deleting
`initialDelay`	`number`	`0`	Initial delay before starting
`loop`	`boolean`	`true`	Whether to loop through texts
`showCursor`	`boolean`	`true`	Show/hide cursor
`cursorCharacter`	`string \| ReactNode`	`"\|"`	Cursor character
`cursorBlinkDuration`	`number`	`0.5`	Cursor blink speed
`startOnVisible`	`boolean`	`false`	Start when element is visible
`reverseMode`	`boolean`	`false`	Type text in reverse
`textColors`	`string[]`	`[]`	Array of colors for each text
`variableSpeed`	`{min: number, max: number}`	-	Random speed range
`onSentenceComplete`	`function`	-	Callback when sentence completes

Examples

Basic Usage

<TextType
  text="Hello, World!"
  typingSpeed={100}
  showCursor={true}
/>

Multiple Texts

<TextType
  text={["Welcome", "to MVPBlocks", "Start building!"]}
  typingSpeed={75}
  pauseDuration={2000}
  loop={true}
/>

Custom Colors

<TextType
  text={["Red text", "Blue text", "Green text"]}
  textColors={["#ef4444", "#3b82f6", "#22c55e"]}
/>

Variable Speed

<TextType
  text="Variable speed typing"
  variableSpeed={{ min: 50, max: 150 }}
/>

Start on Visible

<TextType
  text="Starts when visible"
  startOnVisible={true}
/>

Custom Cursor

<TextType
  text="Custom cursor"
  cursorCharacter="▊"
  cursorBlinkDuration={0.8}
/>

Text Type

Installation

Usage

Features

Props

Examples

Basic Usage

Multiple Texts

Custom Colors

Variable Speed

Start on Visible

Custom Cursor

On this page

Contribute