Text Effects

Typewriter Text

문자가 타이핑되듯 순서대로 나타나는 텍스트 애니메이션입니다.

Preview

text motion

|

loop through short phrases

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/typing-animation.json

Code

typescript
Copied
1import { TypingAnimation } from "@/components/typing-animation"23export default function Example() {4  return <TypingAnimation>Typing Animation</TypingAnimation>5}

Props

children

Type
string
Default
-
Description
Text content to type.

words

Type
string[]
Default
-
Description
Rotating words to type.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

duration

Type
number
Default
100
Description
Character timing.

loop

Type
boolean
Default
false
Description
Whether to loop words.

showCursor

Type
boolean
Default
true
Description
Whether to show cursor.

Reference

Reference Typewriter Text