Text Effects

Rotating Word Flip

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

Preview

text motion

Coding isfantastic

flip through short words

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/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

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
prefixstring"Coding is"Stable text rendered before the animated word.
wordsstring[]-Words to rotate.
intervalnumber2600Flip interval in milliseconds.

Reference

Animata Text Flip