forked from emre/www_projectmycelium_com
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const LayoutTextFlip = ({
|
|
text = "Build Amazing",
|
|
words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"],
|
|
duration = 1500,
|
|
}: {
|
|
text: string;
|
|
words: string[];
|
|
duration?: number;
|
|
}) => {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
|
|
}, duration);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<motion.span
|
|
layoutId="subtext"
|
|
className="text-2xl font-bold tracking-tight drop-shadow-lg md:text-4xl"
|
|
>
|
|
{text}
|
|
</motion.span>
|
|
|
|
<motion.span
|
|
layout
|
|
className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
|
|
>
|
|
<AnimatePresence mode="popLayout">
|
|
<motion.span
|
|
key={currentIndex}
|
|
initial={{ y: -40, filter: "blur(10px)" }}
|
|
animate={{
|
|
y: 0,
|
|
filter: "blur(0px)",
|
|
}}
|
|
exit={{ y: 50, filter: "blur(10px)", opacity: 0 }}
|
|
transition={{
|
|
duration: 0.5,
|
|
}}
|
|
className={cn("inline-block whitespace-nowrap")}
|
|
>
|
|
{words[currentIndex]}
|
|
</motion.span>
|
|
</AnimatePresence>
|
|
</motion.span>
|
|
</>
|
|
);
|
|
};
|