Introducing Remotion Hub Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Gradual Spacing

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.

components/magicui/gradual-spacing.tsx
"use client";
 
import { cn } from "@/lib/utils";
import { AnimatePresence, Variants, motion } from "framer-motion";
 
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={cn("drop-shadow-sm ", className)}
          >
            {char === " " ? <span>&nbsp;</span> : char}
          </motion.h1>
        ))}
      </AnimatePresence>
    </div>
  );
}

Props

PropTypeDescriptionDefault
classNamestringThe class name to be applied to the component
durationnumberThe class name to be applied to the shimmer.0.5
delayMultiplenumberThe class name to be applied to the shimmer.0.1
textstringAn array of words to rotate through""
framerPropsHTMLMotionPropsAn object containing framer-motion animation props