Word Rotate

New

Cycles through words with a blur-and-slide swap while the line reflows smoothly around them.

motionutils@soultel/use-reduced-motion-safe

Build faster

Installation

$ pnpm dlx shadcn@latest add @soultel/word-rotate

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/word-rotate.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/word-rotate.tsx.

Usage

example.tsx9 lines

import { WordRotate } from "@/components/word-rotate"

export function Example() {
  return (
    <h1>
      Build <WordRotate words={["faster", "calmer", "together"]} className="text-primary" />
    </h1>
  )
}

Props

Prop	Type	Default	Description
words	string[]	-	Words to cycle through.
interval	number	2400	Time each word stays, in ms.