45 lines
983 B
TypeScript
45 lines
983 B
TypeScript
"use client";
|
|
|
|
import type { Variants } from "framer-motion";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { ny } from "@/lib/utils";
|
|
|
|
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 space-x-1">
|
|
<AnimatePresence>
|
|
{text.split("").map((char, i) => (
|
|
<motion.h1
|
|
key={i}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="hidden"
|
|
variants={framerProps}
|
|
transition={{ duration, delay: i * delayMultiple }}
|
|
className={ny("drop-shadow-sm", className)}
|
|
>
|
|
{char === " " ? <span> </span> : char}
|
|
</motion.h1>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|