Flip Words: Free React + Tailwind Component

Automatically cycles through a set of words, with the container width adapting to the text.

Automatically cycles through a set of words: characters fade in with a blur, the outgoing word drifts up as a whole, and the container width adapts smoothly to the current word. Commonly used to emphasize a swappable keyword inside a heading.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add flip-words.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Hold time (ms)interval

2600

Duration (s)duration

0.5

Per-character stagger (s)stagger

0.045

Modemode

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<FlipWords/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/flip-words.en.json

Or, once registries are configured in components.json, install it as @webberui/flip-words.

Usage

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

<h1 className="text-4xl font-semibold">
  Build
  <FlipWords words={["fast", "animated", "beautiful"]} />
  web interfaces
</h1>

Reel mode

mode="reel" works like a slot-machine reel: the current word sits in the middle, while the previous and next words stay visible above and below, faded and scaled down. On every switch the whole reel scrolls up by one row. The container takes the width of the longest word, so the layout never jitters while it scrolls.

<FlipWords mode="reel" words={["login page", "dashboard", "checkout"]} interval={2000} />

Props

Prop	Type	Default	Description
`words`	`string[]`	—	The list of words to cycle through
`interval`	`number`	`2600`	How long each word stays (milliseconds)
`duration`	`number`	`0.5`	Base duration of the whole switch animation (seconds)
`stagger`	`number`	`0.045`	Interval between characters entering (seconds); flip mode only
`mode`	`"flip" \| "reel"`	`"flip"`	flip animates letter by letter; reel works like a slot-machine reel, showing the neighbouring words and scrolling vertically
`className`	`string`	—	forwarded to the outermost container

How it works

Reel mode shows three rows at once (previous, current, next); neighbours sit at 0.35 opacity and 0.78 scale, and the top and bottom edges fade out through a mask
Reel mode keys rows by an ever-increasing step, so when the list wraps around the same reel keeps scrolling up instead of jumping back
In reel mode duration is how long one row of scrolling takes; stagger has no effect

Accessibility

When the user has "reduce motion" enabled at the system level, the first word is rendered as static text and no timer starts
The current word is announced in full through an sr-only copy; the split graphemes and the reel-mode neighbour words are hidden from assistive technology (aria-hidden)
Reduced motion: flip mode renders the first word as static text and starts no timer; reel mode keeps cycling but crossfades in place instead of scrolling vertically

Flip Words