Balick UI

Word Rotate

Cycles through words in place, each one sliding up into view. Stops on the first word under reduced motion.

Dependenciesmotion
Open in

Ship pages faster, calmer, together

Installation#

pnpm dlx shadcn@latest add @balick/word-rotate

Or pass the full URL: https://ui.balick.me/r/word-rotate.json

Usage#

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

export function Headline() {
  return (
    <h1>
      Ship pages <WordRotate words={["faster", "calmer", "together"]} />
    </h1>
  )
}

Props#

PropTypeDefault
words

Words shown in turn, starting with the first. Required.

string[]—
interval

Time each word stays, in milliseconds.

number2500