Text Swap

Animated text that swaps through items with a fade transition.

I am aDeveloper

Dependencies (1): motion

Use cases

Rotating roles or taglines in a hero section.
Changing word inside a headline.
Cycling commands or keywords in a product demo.

Installation

pnpm dlx shadcn@latest add @ncdai/text-swap

Usage

import { TextSwap } from "@/components/text-swap"

<TextSwap>
  <span>Developer</span>
  <span>Designer</span>
  <span>Creator</span>
</TextSwap>

API reference

TextSwap

Prop

Type

Accessibility

With prefers-reduced-motion, items still cycle but fade in place, without moving or blurring.
Passing variants replaces this fallback, so custom variants need their own.

License and usage

Free to use and modify in both personal and commercial projects.
Attribution is appreciated but not required.
Released under the MIT License.

Was this helpful?