A component that cycles text over certain interval.
npm install framer-motion
It will create a new file called cycle-text.tsx inside the components/animata/text directory.
cycle-text.tsx
components/animata/text
mkdir -p components/animata/text && touch components/animata/text/cycle-text.tsx
Open the newly created file and paste the following code:
import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; 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> ); }
Built by Laxmi Lamichhane