Text Reveal

The TextReveal component breaks a string down into individual words and orchestrates a highly customizable entrance sequence when the text scrolls into the viewport. Now updated to use Framer Motion (removing the GSAP dependency) with 4 distinct built-in variants.

Live Preview

Installation

Viewport Logic

The component utilizes Framer Motion's useInView hook with margin: "-15% 0px". This ensures the stagger animation reliably triggers exactly once when the heading scrolls far enough into the viewport to be comfortably seen by the user.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { TextReveal } from "@/components/creative/text-reveal";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { TextReveal } from "@/components/creative/text-reveal";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <TextReveal
        text="example"
        delay{10}
        speed{10}
      />
    </div>
  );
}