DocsFlipping Word Swap

Flipping Word Swap

A clean character-by-character word swap that flips the next word smoothly into place on hover, focus, or tap.

Installation

pnpm dlx shadcn@latest add @componentry/flipping-word-swap

Usage

import { FlippingWordSwap } from "@/components/ui/flipping-word-swap"

<div className="flex min-h-[400px] items-center justify-center">
  <FlippingWordSwap
    word1="Componentry"
    word2="Consistency"
    duration={400}
    stagger={44}
    className="text-zinc-950 dark:text-zinc-100"
    toClassName="text-zinc-950 dark:text-zinc-100"
    style={{
      fontSize: 48,
      fontWeight: 700,
      lineHeight: 1,
      letterSpacing: "-0.025em",
    }}
  />
</div>

API Reference

PropertyTypeDefault
word1

The word displayed at rest.

string—
word2

The word revealed during interaction.

string—
duration

Duration of each character flip in milliseconds.

number400
stagger

Delay between neighboring character flips in milliseconds.

number44
className

Additional classes for layout and inherited typography.

string—
toClassName

Additional classes applied only to the revealed word.

string—
style

Inline styles applied to the container for dynamic typography and color controls.

CSSProperties—
toStyle

Inline styles applied only to the revealed word.

CSSProperties—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X