Text Reveal

Motion

Cinematic Tailwind text reveal and Tailwind CSS scroll animation components that blur-in words sequentially as they enter the viewport.

On this page

Implementation Usage Basic Text Reveal Staggered Multi-line Reveal Props

Make your long-form copy highly engaging with a Tailwind text reveal. This Tailwind CSS scroll animation component fades and unblurs individual words sequentially as the user scrolls, naturally pacing the reader and mimicking the cadence of human speech.

Text reveals are incredibly effective for establishing tone in a Hero section or a focused typographic Features block.

Implementation

"use client";

import React, { useRef } from "react";
import { motion, useInView } from "framer-motion";

interface TextRevealProps {
  text: string;
  className?: string;
  delay?: number;
}

export const TextReveal: React.FC<TextRevealProps> = ({
  text,
  className = "",
  delay = 0,
}) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const words = text.split(" ");

  return (
    <div ref={ref} className={`flex flex-wrap ${className}`}>
      {words.map((word, i) => (
        <motion.span
          key={i}
          initial={{ opacity: 0, y: 10, filter: "blur(4px)" }}
          animate={
            isInView
              ? { opacity: 1, y: 0, filter: "blur(0px)" }
              : { opacity: 0, y: 10, filter: "blur(4px)" }
          }
          transition={{
            duration: 0.4,
            delay: delay + i * 0.06,
            ease: [0.25, 0.1, 0.25, 1],
          }}
          className="mr-[0.3em] inline-block"
        >
          {word}
        </motion.span>
      ))}
    </div>
  );
};

Usage

Basic Text Reveal

Everypixelmatters.

<TextReveal text="Every pixel matters." />

Staggered Multi-line Reveal

Designisnotjust

whatitlookslikeandfeelslike.

Designishowitworks.

<TextReveal text="Design is not just" delay={0} />
<TextReveal text="what it looks like and feels like." delay={0.3} />
<TextReveal text="Design is how it works." delay={0.7} />

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to reveal word-by-word
`className`	`string`	`""`	Additional CSS classes
`delay`	`number`	`0`	Delay in seconds before animation starts

Blog List

Number Ticker