H
UI by hampton.io
Back to Components
Text Effects

Word Rotate Text

Rotates through a list of words with a smooth flip animation.

PropsUsage ExampleVariations
Built forteams

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion

Files

  • components/ui/word-rotate-text.tsx

Installation

Using shadcn CLI

npx shadcn add word-rotate-text --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion

Related Text Effects Components

Animated Text Reveal

Reveal text by letter or word as it enters the viewport.

Gradient Text

Animated gradient text with flowing motion and semantic color stops. Uses Framer Motion for a smooth, continuous sweep.

Morph Text

Morphs between words with a smooth blur and slide transition.

Scramble Text

Scrambles characters before resolving into a crisp headline, perfect for dramatic reveals.

Scroll Reveal Text

Reveals words or characters as you scroll, creating a story-like reading flow.

Text Highlight On Scroll

Highlights words in sequence as the user scrolls.