184 Components
Morphing Flip Text
Text3D perspective tumbling word cycler that rotates between headline phrases with spring inertia along the X or Y axis.
Fast
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/morphing-flip-text.json"
Props
TypeScript props supported by <MorphingFlipText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | — | Array of words/phrases to cycle through. |
| interval | number | 2400 | Interval in milliseconds between word flips. |
| direction | "vertical" | "horizontal" | "vertical" | Axis of 3D tumbling rotation. |
Key Features
- 3D perspective rotation with spring-tuned entry and exit kinematics.
- Dual directional modes: vertical (rotateX roll) and horizontal (rotateY turn).
- Clean layout preservation with AnimatePresence mode='wait'.
- Automatic timer disposal and memory leak protection.
Keyboard & Accessibility
- Readable typographic flow in the document outline.
- Bypasses 3D rotations when prefers-reduced-motion is active.