Ticker

1"use client"
2 
3import { AnimatePresence, motion } from "motion/react"
4import { useEffect, useState } from "react"
5 
6export function Ticker({ text }: { text: string }) {
7  const [currentText, setCurrentText] = useState<string>(text)
8 
9  useEffect(() => {
10    setCurrentText(text)
11  }, [text])
12 
13  return (
14    <motion.div
15      initial={{ opacity: 0, y: -10, filter: "blur(1px)" }}
16      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
17      exit={{ opacity: 0, y: -10, filter: "blur(1px)" }}
18      className="font-jetbrains-mono mt-1 mb-3 flex items-center text-sm font-medium text-gray-500"
19    >
20      <AnimatePresence mode="wait">
21        <motion.span
22          key={currentText}
23          initial={{ opacity: 0, filter: "blur(1px)", y: -3 }}
24          animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
25          exit={{ opacity: 0, filter: "blur(1px)", y: 3 }}
26          transition={{ duration: 0.15, ease: "easeInOut" }}
27          className="ml-1.5 text-black dark:text-gray-200"
28        >
29          {currentText}
30        </motion.span>
31      </AnimatePresence>
32    </motion.div>
33  )
34}