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

Dependencies: gsap clsx tailwind-merge

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

Prop	Type	Default
`word1`	`string` The word displayed at rest.	—
`word2`	`string` The word revealed during interaction.	—
`duration`	`number` Duration of each character flip in milliseconds.	`400`
`stagger`	`number` Delay between neighboring character flips in milliseconds.	`44`
`className`	`string` Additional classes for layout and inherited typography.	—
`toClassName`	`string` Additional classes applied only to the revealed word.	—
`style`	`CSSProperties` Inline styles applied to the container for dynamic typography and color controls.	—
`toStyle`	`CSSProperties` Inline styles applied only to the revealed word.	—

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