MorphoText Flip

Animated text component that flips between words with smooth transitions.

Build something

remarkable
remarkable

Installation

npx scrollx-ui@latest add 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

Build like it matters

with heart
with heart

FadeScale Variant

Move different

Stay rare
Stay rare

SlideRotate Variant

Chase the edge

Stay sharp
Stay sharp

Elastic Variant

Flow with it

Bounce back
Bounce back

API Reference

MorphoTextFlip

  • words (string[]) – Array of words to animate through.
  • interval (number) – Time in ms between word changes.
  • animationType ('slideUp', 'fadeScale', 'flipY', 'slideRotate', 'elastic') – Animation style for transitions.
  • animationDuration (number) – Duration of each animation in ms.
  • className, textClassName (string) – Custom classes for container and text.