Docs
Smooth Typing Text
Smooth Typing Text
Displays a beautiful Smooth Typing Text.
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Typing Text code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
| words | string | Generate text words. |
| className | string | Additional classes for the Text. |
| cursorClassName | string | Additional classes for the cursor. |
Usage
export function TypewriterEffectSmoothDemo() {
const words = [
{
text: "Build",
},
{
text: "animation",
},
{
text: "smooth",
},
{
text: "typing",
},
{
text: "text.",
},
]
return (
<div className="flex flex-col items-center justify-center h-[20rem] ">
<TypewriterEffectSmooth words={words} />
</div>
)
}