Docs
Cycle Text
A component that cycles text over certain interval.
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/text/cycle-text.jsonManual
Install dependencies.
npm install motionRun the following command
It will create a new file called cycle-text.tsx inside the components/animata/text directory.
mkdir -p components/animata/text && touch components/animata/text/cycle-text.tsxPaste the code
Open the newly created file and paste the following code:
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState } from "react";
export default function CycleText() {
const words = ["Hello", "World", "Ciaoo", "World"];
const [index, setIndex] = useState(0);
const total = words.length;
useEffect(() => {
const interval = setInterval(() => {
setIndex((current) => (current + 1) % total);
}, 1300);
return () => clearInterval(interval);
}, [total]);
return (
<div>
<span className="font-mono text-xl text-pink-600">
System.out.println(
<AnimatePresence mode="wait">
<motion.h1
key={`words_${index}`}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -30 }}
transition={{ duration: 0.08 }}
className="inline-block font-mono text-xl text-blue-700"
>
"{words[index]}"
</motion.h1>
</AnimatePresence>
)
</span>
</div>
);
}Credits
Built by Laxmi Lamichhane