Modern Text Reveal

A smooth and modern text reveal component with a slide animation effect.

Text Reveal

Slide Animation

You

wanted

see

magic.

Tadaaa

import { ModernTextReveal } from "@/components/ui/modern-text-reveal";

export default function Home() {
  return (
    <div className="flex h-screen flex-col items-center justify-center gap-8">
      <ModernTextReveal
        text="You wanted to see magic. Tadaaa"
        className="text-2xl font-semibold"
      />
    </div>
  );
}

Installation

Paste this code in your terminal

npx shadcn@latest add https://rohitnirban.com/r/modern-text-reveal.json

Install dependencies

npm i motion clsx tailwind-merge

Add util file

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source code

components/ui/modern-text-reveal.tsx

"use client";

import { useRef } from "react";
import { motion, useInView } from "motion/react";
import { cn } from "@/lib/utils";

interface ModernTextRevealProps {
  text: string;
  className?: string;
}

export function ModernTextReveal({ text, className }: ModernTextRevealProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-10%" });

  return (
    <div ref={ref} className="flex flex-wrap gap-2">
      {text.split(" ").map((word, index) => (
        // Index key: the same word can appear twice in a sentence.
        <div className="relative overflow-hidden" key={index}>
          <motion.div
            initial={{ y: 0 }}
            animate={isInView ? { y: "101%" } : { y: "0%" }}
            transition={{
              duration: 0.5,
              ease: [0.25, 1, 0.5, 1],
              delay: 0.5 + index * 0.05,
            }}
            className={cn("absolute inset-0 inline-block h-full w-fit", className)}
            style={{ backgroundColor: "currentColor" }}
          >
            {word}
          </motion.div>
          <motion.div className={cn("inline-block", className)}>
            {word}
          </motion.div>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Required
`text` The sentence to reveal, split and animated word by word.	`string`	—	Yes
`className` Additional CSS classes applied to each word.	`string`	—	No