Type Animation

Displays an animated typing effect.

Installation

npx scrollx-ui@latest add typeanimation

Usage

import Typeanimation from '@/components/ui/typeanimation';

<Typeanimation
    words={[' possibilities', ' opportunities', ' potential']}
    typingSpeed="slow"
    deletingSpeed="slow"
    pauseDuration={2000}
    className="text-3xl md:text-5xl font-extrabold text-teal-600"
  />

API Reference

Typeanimation

Displays an animated typing effect with gradient text.

• words – Array of words to animate
• className – Optional class name for custom styling
• typingSpeed – Typing speed in ms or 'slow' | 'normal' | 'fast' (default: 50)
• deletingSpeed – Deleting speed in ms or 'slow' | 'normal' | 'fast' (default: 50)
• pauseDuration – Delay between each word in ms (default: 1000)
• gradientFrom – Tailwind color suffix for gradient start (default: 'blue-500')
• gradientTo – Tailwind color suffix for gradient end (default: 'purple-600')