Container Text Flip for React

Container Text Flip sets one word of a headline in a box and flips it to the next, again and again: the outgoing word fades into a blur, the box grows or shrinks to the next word's width, and the new word comes into focus inside it letter by letter. It pauses while the pointer is over it.

Use it for the word of a hero line that should read like a badge or a key: what a product makes things, who it's for. For a word that changes without a box and holds its widest width, use Flip Words or Rotating Text. A small timer counts the turns; at each one it reads the box's width and the next word's, laid out unseen, and a CSS transition runs between them, while CSS keyframe animations the install adds to your stylesheet bring the letters in, with no animation library. With reduced motion the words swap in place and the box simply fits each one.

Installation

Usage

import { ContainerTextFlip } from "@/components/ui/container-text-flip";

<h2>
  Make your websites <ContainerTextFlip words={["better", "modern", "beautiful"]} />
</h2>

Demos

Colors

The box is the component itself, so its className styles it: a background, a border colour, a radius, a shadow. Here it takes the theme's primary colour; the letters keep the text colour you give it.

Timing

duration is how long each word stays, 3000 ms by default, and stagger the time between one letter coming in and the next, 30 ms.

Accessibility

Screen readers read every word once, as a list (better, modern, beautiful), from a visually hidden copy; the flipping letters are hidden from them, so they never hear a word change mid-sentence. The words stop while the pointer is over them, for anyone reading slowly, and with reduced motion they swap without blurring and the box changes size at once.

FAQ

API Reference