Evandro Fonseca Junior
5c1ccbc69a
Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { AnimatePresence, motion, MotionProps } from "motion/react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface WordRotateProps {
|
|
words: string[]
|
|
duration?: number
|
|
motionProps?: MotionProps
|
|
className?: string
|
|
}
|
|
|
|
export function WordRotate({
|
|
words,
|
|
duration = 2500,
|
|
motionProps = {
|
|
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)}
|
|
{...motionProps}
|
|
>
|
|
{words[index]}
|
|
</motion.h1>
|
|
</AnimatePresence>
|
|
</div>
|
|
)
|
|
}
|