Text Reveal

Text 149

About

Animated text that reveals word by word or character by character with a staggered blur-and-slide effect, optionally triggered when it scrolls into view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Reveal to your project and fits it to your theme.

Code

How Text Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { TextReveal } from "@/components/ui/text-reveal";

const COPY =
  "Nobody is given a week to write these, so they ship at eighty percent and stay there for the life of the product.";

export function TextRevealDemo() {
  const [take, setTake] = React.useState(0);

  return (
    <div className="mx-auto w-full max-w-[420px]">
      <TextReveal
        key={take}
        text={COPY}
        startOnView={false}
        className="block text-[13.5px] leading-relaxed text-ink-2"
      />

      <button
        type="button"
        onClick={() => setTake((t) => t + 1)}
        className="mat-cap press mt-4 h-8 rounded-[6px] px-3 text-[12.5px] font-medium text-ink"
      >
        Reveal
      </button>
    </div>
  );
}

export default TextRevealDemo;