MorphoText Flip

Animated text component that flips between words with smooth transitions.

Installation

npx shadcn@latest add @scrollxui/morphotextflip

Usage

import { MorphoTextFlip } from '@/components/ui/morphotextflip';

<MorphoTextFlip
  words={['remarkable', 'bold', 'scalable', 'beautiful']}
  textClassName='text-4xl md:text-7xl text-rose-600 dark:text-rose-400 font-bold mt-1'
  animationType='flipY'
/>

Examples

SlideUp Variant

FadeScale Variant

SlideRotate Variant

Elastic Variant

Changelog

19-11-2025, Updated MorphoTextFlip

Refined width auto-measure system for smoother container resizing and stability.
Improved animation variant logic and unified className handling for cleaner structure.

API Reference

MorphoTextFlip

The MorphoTextFlip component renders animated text component that flips between words with smooth transitions.

Props

Property	Type	Default	Description
`words`	string[]	`required`	Words to animate through.
`interval`	number	`—`	Time between word changes (ms).
`animationType`	"slideUp" \| "fadeScale" \| "flipY" \| "slideRotate" \| "elastic"	`—`	Transition animation style.
`animationDuration`	number	`—`	Duration of each animation (ms).
`className`	string	`—`	Class for the outer container.
`textClassName`	string	`—`	Class for the animated text element.