Word Rotate

Renders a vertical word rotation animation. Displays one word at a time, transitioning smoothly between them. Use to create a dynamic text effect on a webpage.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/word-rotate

npx layro-cli add @magicuidesign/word-rotate

npx layro-cli add @magicuidesign/word-rotate

bunx layro-cli add @magicuidesign/word-rotate

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useEffect, useState } from "react"
import { AnimatePresence, motion, type MotionProps } from "motion/react"

import { cn } from "@/lib/utils"

interface WordRotateProps {
  words: string[]
  duration?: number
  motionProps?: MotionProps
  className?: string
}