Word Rotate

Component for a group of words that rotate.

Website

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

export function WordRotateDemo() {
  return (
    <WordRotate
      className="text-4xl font-bold text-black dark:text-white"
      words={["Website", "Platform", "Builder", "Experience"]}
      duration={2000}
      pauseOnHover
    />
  )
}

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/word-rotate.json

Usage

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

<WordRotate words={["Website", "Platform", "Builder", "Experience"]} />

Props

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to be applied to the component
`duration`	`number`	`2500`	Duration of the animation
`words`	`string[]`	`""`	An array of words to rotate through
`motionProps`	`HTMLMotionProps`	`{}`	An object containing motion animation props

Typing Animation Installation

On This Page

Installation Usage Props

Support Ebon UI by giving it a star on GitHub!

A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.