Flip Words

A typography component. It utilizes Framer Motion's AnimatePresence with mode="popLayout" to smoothly slide adjacent text over as the rotating word changes length, preventing the jarring layout jumps seen in most word rotators.

Live Preview

Buildbeautifulinterfaces with Modus UI.

Installation

CLI

npx @modus-ui/cli add flip-words

Manual

Copy the code from the component tab.
Create a file at components/ui/flip-words.tsx.
Paste the code.

Usage

tsx

import { FlipWords } from "@/components/ui/flip-words";

export default function Example() {
  return (
    <h2>
      Build <FlipWords words={["fast", "beautiful", "modern"]} /> websites.
    </h2>
  );
}

Props

Prop	Type	Default	Description
`words`	`string[]`	-	The words to cycle through.
`interval`	`number`	`2`	Seconds each word stays visible.
`duration`	`number`	`0.5`	Seconds each flip animation takes.