wehub-resource-sync
45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion, Variants } from "framer-motion";
|
|
|
|
import { cn } from "@/utils/cn";
|
|
|
|
interface GradualSpacingProps {
|
|
text: string;
|
|
duration?: number;
|
|
delayMultiple?: number;
|
|
framerProps?: Variants;
|
|
className?: string;
|
|
}
|
|
|
|
export default function GradualSpacing({
|
|
text,
|
|
duration = 0.5,
|
|
delayMultiple = 0.04,
|
|
framerProps = {
|
|
hidden: { opacity: 0, x: -20 },
|
|
visible: { opacity: 1, x: 0 },
|
|
},
|
|
className,
|
|
}: GradualSpacingProps) {
|
|
return (
|
|
<div className="flex justify-center">
|
|
<AnimatePresence>
|
|
{text.split("").map((char, i) => (
|
|
<motion.h1
|
|
key={i}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="hidden"
|
|
variants={framerProps}
|
|
transition={{ duration, delay: i * delayMultiple }}
|
|
className={cn("drop-shadow-sm", className)}
|
|
>
|
|
{char === " " ? <span> </span> : char}
|
|
</motion.h1>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|