Word Rotate
An vertical rotation of words
Word
Installation
Install the following dependencies:
npm install framer-motion
Copy and paste the following code into your project.
"use client"
import { useEffect, useState } from "react"
import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion"
import { cn } from "@/lib/utils"
interface WordRotateProps {
words: string[]
duration?: number
framerProps?: HTMLMotionProps<"h1">
className?: string
}
export function WordRotate({
words,
duration = 2500,
framerProps = {
initial: { opacity: 0, y: -50 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: 50 },
transition: { duration: 0.25, ease: "easeOut" },
},
className,
}: WordRotateProps) {
const [index, setIndex] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setIndex((prevIndex) => (prevIndex + 1) % words.length)
}, duration)
// Clean up interval on unmount
return () => clearInterval(interval)
}, [words, duration])
return (
<div className="overflow-hidden py-2">
<AnimatePresence mode="wait">
<motion.h1
key={words[index]}
className={cn(className)}
{...framerProps}
>
{words[index]}
</motion.h1>
</AnimatePresence>
</div>
)
}
Update the import paths to match your project setup.
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component | |
duration | number | Duration of the animation | 2500 |
words | string[] | An array of words to rotate through | "" |
framerProps | HTMLMotionProps | An object containing framer-motion animation props |