Rotating Text
Pro
A colored pill that cycles through words with a vertical slide and resizes to fit each one.
Built for games, apps, courses, launches
Customize
2200ms
#ff784f
#070606
Installation
Rotating Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy rotating-text.tsx into components/ui and run npm install motion.
Usage
import { RotatingText } from "@/components/ui/rotating-text";
<h2 className="text-5xl font-black">
Built for <RotatingText words={["games", "apps", "courses"]} />
</h2>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| words | string[] | — | The words to cycle through, in order. |
| interval | number | 2200 | Milliseconds each word stays on screen. |
| pillColor | string | "#ff784f" | Background of the pill. |
| textColor | string | "#070606" | Color of the words inside the pill. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion