Text Flip
Get
Work
Installation
Install Dependencies
Copy and Paste the component
@/components/reframe-ui/text-flip.tsx
Usage
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | React.ReactNode[] | - | Yes | Items to flip through (strings or nodes). |
| className | string | - | No | Optional wrapper class. |
| interval | number | 2 | No | Seconds between flips. |
| transition | Transition | { duration: 0.45, ease: [0.22, 1, 0.36, 1] } | No | Framer Motion transition for flip. |
| variants | Variants | - | No | Override the default flip variants. |
| onIndexChange | (index: number) => void | - | No | Callback when the current index changes. |
| trigger | boolean | No | Start/stop flipping. | |
| mode | AnimatePresenceProps['mode'] | wait | No | AnimatePresence rendering mode. |
| perspective | number | 800 | No | CSS perspective (px) applied to container for 3D flip. |
| depth | number | 10 | No | Transform-origin z-offset (px) for depth of flip. |
| axis | 'x' | 'y' | x | No | Flip axis. x = vertical flip, y = horizontal flip. |
© Copyright 2025. All rights reserved.Built by @thommysart