Hello Rotate

hello.tsx

import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useReducer } from "react";

const HELLO = ["Hello", "Xin chào", "你好", "Bonjour", "こんにちは"] as const;

export function Hello() {
	const [index, next] = useReducer((val) => (val + 1) % HELLO.length, 0);

	useEffect(() => {
		const interval = setInterval(() => next(), 2000);
		return () => clearInterval(interval);
	});

	return (
		<div className="grid w-screen h-screen place-items-center">
			<AnimatePresence mode="wait">
				<motion.h1
					key={HELLO[index]}
					className="text-3xl font-medium"
					initial={{ opacity: 0, y: -20 }}
					animate={{ opacity: 1, y: 0 }}
					exit={{ opacity: 0, y: 20 }}
					transition={{ duration: 0.25, ease: "easeInOut" }}
				>
					{HELLO[index]}
				</motion.h1>
			</AnimatePresence>
		</div>
	);
}