MorphoText Flip

Animated text component that flips between words with smooth transitions.

Build something

remarkable

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/morphotextflip.json

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

Build like it matters

with heart

FadeScale Variant

Move different

Stay rare

SlideRotate Variant

Chase the edge

Stay sharp

Elastic Variant

Flow with it

Bounce back

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.