Flip Words

Animated word cycling component that flips through an array of words with smooth letter-by-letter animations.

Preview

Build
beautiful 
websites

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/flip-words.json

Usage

tsx
11 lines
1
2
3
4
5
6
7
8
9
10
11
import { FlipWords } from "@/components/ui/flip-words"

export default function Hero() {
  const words = ["beautiful", "modern", "amazing", "stunning"]
  
  return (
    <h1 className="text-4xl font-bold">
      Build <FlipWords words={words} /> websites
    </h1>
  )
}

Examples

Faster Animation

Welcome to
Nyxhora 

Slower Animation

We are
developers 

Standalone Usage

Hello 

Props

PropTypeDefaultDescription
wordsstring[]requiredArray of words to cycle through
durationnumber3000Duration in milliseconds to display each word before switching
classNamestringundefinedAdditional CSS classes for the word container