Word Rotate

Cycles through an array of words with a fade + slide animation. Supports static prefix and suffix text.

Build beautiful

Works with React out of the box

Installation

Run the CLI

$npx particleui-cli add word-rotate

Usage

TSX

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

export default function Example() {
  return (
    <h1 className="text-4xl font-bold">
      <WordRotate
        staticPrefix="Build "
        words={["beautiful", "accessible", "fast"]}
      />
      {" UIs"}
    </h1>
  )
}

Props

Prop	Type	Default	Required
words	string[]	—	yes
interval	number	`2500`	no
className	string	—	no
staticPrefix	string	—	no
staticSuffix	string	—	no

Details

Source filecomponents/ui/word-rotate.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—