Gradual Spacing
Word animation for gradual spacing between letters
G
r
a
d
u
a
l
S
p
a
c
i
n
g
Installation
Copy and paste the following code into your project.
"use client"
import { AnimatePresence, Variants, motion } from "framer-motion"
import { cn } from "@/lib/utils"
interface GradualSpacingProps {
text: string
duration?: number
delayMultiple?: number
framerProps?: Variants
className?: string
}
export 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={cn("drop-shadow-sm ", className)}
>
{char === " " ? <span> </span> : char}
</motion.h1>
))}
</AnimatePresence>
</div>
)
}
Update the import paths to match your project setup.
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component | |
duration | number | Duration of the animation | 0.5 |
delayMultiple | number | Transition delay multiplier. | 0.1 |
text | string | An array of words to rotate through | "" |
framerProps | HTMLMotionProps | An object containing framer-motion animation props |