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


Docs
Fade Text

Fade Text

Characters appearing from faded view

Fade Up
Fade Right
Fade Down
Fade Left

Installation

Copy and paste the following code into your project.

components/magicui/fade-text.tsx
"use client";
 
import { motion, Variants } from "framer-motion";
import { useMemo } from "react";
 
type FadeTextProps = {
  className?: string;
  direction?: "up" | "down" | "left" | "right";
  framerProps?: Variants;
  text: string;
};
 
export function FadeText({
  direction = "up",
  className,
  framerProps = {
    hidden: { opacity: 0 },
    show: { opacity: 1, transition: { type: "spring" } },
  },
  text,
}: FadeTextProps) {
  const directionOffset = useMemo(() => {
    const map = { up: 10, down: -10, left: -10, right: 10 };
    return map[direction];
  }, [direction]);
 
  const axis = direction === "up" || direction === "down" ? "y" : "x";
 
  const FADE_ANIMATION_VARIANTS = useMemo(() => {
    const { hidden, show, ...rest } = framerProps as {
      [name: string]: { [name: string]: number; opacity: number };
    };
 
    return {
      ...rest,
      hidden: {
        ...(hidden ?? {}),
        opacity: hidden?.opacity ?? 0,
        [axis]: hidden?.[axis] ?? directionOffset,
      },
      show: {
        ...(show ?? {}),
        opacity: show?.opacity ?? 1,
        [axis]: show?.[axis] ?? 0,
      },
    };
  }, [directionOffset, axis, framerProps]);
 
  return (
    <motion.div
      initial="hidden"
      animate="show"
      viewport={{ once: true }}
      variants={FADE_ANIMATION_VARIANTS}
    >
      <motion.span className={className}>{text}</motion.span>
    </motion.div>
  );
}

Props

PropTypeDescriptionDefault
classNamestringThe class name to be applied to the component
directionstringCan be: "down" , "left", "right", "up""up"
textstringText to animate""
framerPropsHTMLMotionPropsAn object containing framer-motion animation props