Text Effects

Rotating Word Flip

짧은 단어가 차례로 뒤집히며 교체되는 텍스트 애니메이션입니다.

Preview

text motion

Coding isfantastic

flip through short words

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/text-flip.json

Code

typescript
Copied
1import { TextFlip } from "@/components/text-flip"23export default function Example() {4  return <TextFlip prefix="Coding is" words={["fantastic", "love", "fire"]} />5}

Props

className

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

prefix

Type
string
Default
"Coding is"
Description
Stable text rendered before the animated word.

words

Type
string[]
Default
-
Description
Words to rotate.

interval

Type
number
Default
2600
Description
Flip interval in milliseconds.

Reference

Animata Text Flip