Text Word Flip

Spring-loaded word flips paired with a soft letter-by-letter blur stagger.

textflipwordsblurstaggerheadlineanimationspring

Overview

Text Word Flip is a React and Tailwind CSS word rotator that flips between words and phrases with a spring, in Next.js or any React app, built on Framer Motion. Incoming letters blur in one by one, words in a phrase stagger, and the outgoing word scales up and drifts off to the top right. Each new word is announced to screen readers, as sets the element, and reduced motion shows a static word. Like any rotator, only the visible word exists in the markup, so keep your key phrase in the words around it for search engines.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-word-flip

Usage

Import TextWordFlip from @/components/wensity/text-word-flip and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextWordFlip } from "@/components/wensity/text-word-flip";
 2
 3export default function Example() {
 4  return (
 5    <p className="font-display text-4xl font-semibold whitespace-nowrap">
 6      Build{" "}
 7      <TextWordFlip
 8        words={["clean", "crisp", "sharp", "sleek"]}
 9        className="text-chili-500"
10      />{" "}
11      apps with wensity
12    </p>
13  );
14}

Props

Prop	Type	Default	Description
`words`	string[]	["clean","crisp","sharp","sleek"]	Words or phrases to cycle through.
`duration`	number	1700	Hold time per word before flipping, in milliseconds.
`letterDelay`	number	0.05	Stagger delay between letters, in seconds.
`wordDelay`	number	0.3	Stagger delay between words inside a phrase, in seconds.
`paused`	boolean	false	Pause the cycle on the current word.
`as`	"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	"span"	Element to render. Pass a heading tag when the rotating word is the whole headline.

Featured in React hero section components.