45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
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>
|
|
)
|
|
}
|