║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Type Animation description: Displays an animated typing effect.

<ComponentPreview name="typeanimation-demo" className="" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="typeanimation" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion react-type-animation" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>typeanimation.tsx</code> </p> <ComponentSource name="typeanimation" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

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.

Props

<PropsTable rows={[ { prop: "words", type: "string[]", default: "required", description: "Array of words to animate through the typing effect" }, { prop: "className", type: "string", default: "—", description: "Optional class name for custom styling" }, { prop: "typingSpeed", type: "number | 'slow' | 'normal' | 'fast'", default: "50", description: "Typing speed in milliseconds or preset speed values" }, { prop: "deletingSpeed", type: "number | 'slow' | 'normal' | 'fast'", default: "50", description: "Deleting speed in milliseconds or preset speed values" }, { prop: "pauseDuration", type: "number", default: "1000", description: "Delay between each word transition in milliseconds" }, { prop: "gradientFrom", type: "string", default: "'blue-500'", description: "Tailwind color suffix for gradient start color" }, { prop: "gradientTo", type: "string", default: "'purple-600'", description: "Tailwind color suffix for gradient end color" } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║