Displays a beautiful Fliping Text.
npm install framer-motionimport { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
| Prop | Type | Description |
|---|---|---|
| words | string | fliping text words. |
| className | string | Additional classes for the Text. |
| duration | number | animated duration |
export function FlipWordsDemo() {
const words = ["Super", "Smooth", "Beautiful", "Modern"]
return (
<div className="h-[40rem] flex justify-center items-center px-4">
<div className="text-4xl mx-auto font-normal text-neutral-600 dark:text-neutral-400">
Build
<br />
<FlipWords words={words} /> <br />
Website using BuouUI
</div>
</div>
)
}