Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Typewriter Effect

Text generates as if it is being typed on the screen.

Open in

The road to freedom starts from here

Build 
awesome 
apps 
with 
Aceternity. 

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/typewriter-effect.json

Example

A more janky animation to give a typing effect.

Open in

The road to freedom starts from here

 
 
 
 
 

Props

Prop nameTypeDescription
classNamestringThe class name of the container component.
wordsArray<{text: string; className: string;}>Every word with a className that you can define
cursorClassNamestringThe className of the cursor component

Build websites faster and 10x better than your competitors with Aceternity UI Pro

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro
Manu is an artist, I didn't know what I wanted when we started, but his intuition and eye for design more than made up for it. We went from "I want something dark theme and high...

John Ferry

President at TAC, CEO at Rogue

A product by Aceternity
Building in public at @mannupaaji