Flip Text | Vengeance UI

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/flip-text.json

Usage

code

1import { FlipText } from "@/components/ui/flip-text"
2
3export default function Example() {
4  return (
5    <FlipText className="text-4xl font-bold">
6      Your amazing text here
7    </FlipText>
8  )
9}

Props

Prop Name	Type	Default	Description
children	`string`	`-`	The text content to animate. Must be a string.
className	`string`	`-`	Additional CSS classes to apply to the wrapper element.
duration	`number`	`2.2`	Duration of the flip animation in seconds.
delay	`number`	`0`	Initial delay before animation starts in seconds.
loop	`boolean`	`true`	Whether the animation should loop infinitely or play once.
separator	`string`	`' '`	Custom separator for splitting text. Default is space.