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

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/typing-animation.json

bash

Copied

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

bash

Copied

1bunx 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.

Prop	Type	Default	Description
children	string	-	Text content to type.
words	string[]	-	Rotating words to type.
className	string	-	Additional classes merged onto the component.
duration	number	100	Character timing.
loop	boolean	false	Whether to loop words.
showCursor	boolean	true	Whether to show cursor.

Reference

Reference Typewriter Text