Text Reveal | Craft | Muhammed Sanjid

Installation

Use the following command to install the component:

$ pnpm dlx shadcn@latest add https://ui.sanjid.in/r/text-reveal.json

Install the following dependencies:

$ pnpm add motion

Add util file

lib/utils.ts

tsx

1import { ClassValue, clsx } from "clsx";2import { twMerge } from "tailwind-merge";3
4export function cn(...inputs: ClassValue[]) {5  return twMerge(clsx(inputs));6}

Copy and paste the following code into your project.

components/ui/text-reveal.tsx

tsx

1"use client";2
3import { useEffect, useRef } from "react";4import { cn } from "@/lib/utils";5
6interface TextRevealProps {7  text: string;8  variant?: "blur-sm" | "chat" | "pop";9  className?: string;10  delayPerWord?: number;11  duration?: number;12}13
14/**15 * Staggered line reveal via transitions.dev `.t-stagger`.16 * `variant` / timing props are kept for API compatibility; the CSS tokens own motion.17 */18export const TextReveal = ({19  text,20  variant: _variant = "blur-sm",21  className,22  delayPerWord: _delayPerWord,23  duration: _duration,24}: TextRevealProps) => {25  void _variant;26  void _delayPerWord;27  void _duration;28
29  const rootRef = useRef<HTMLDivElement>(null);30  // Split into ~2 visual lines for the stagger pattern (headline + support)31  const words = text.trim().split(/\s+/);32  const mid = Math.max(1, Math.ceil(words.length / 2));33  const line1 = words.slice(0, mid).join(" ");34  const line2 = words.slice(mid).join(" ");35
36  useEffect(() => {37    const block = rootRef.current;38    if (!block) return;39    block.classList.remove("is-hiding", "is-shown");40    void block.offsetHeight;41    block.classList.add("is-shown");42  }, [text]);43
44  return (45    <div46      ref={rootRef}47      className={cn("t-stagger text-(--color-ink)", className)}48    >49      <strong className="t-stagger-line t-stagger-line--1 font-semibold">50        {line1}51      </strong>52      {line2 ? (53        <span className="t-stagger-line t-stagger-line--2">{line2}</span>54      ) : null}55    </div>56  );57};

Update the import paths to match your project setup.

Basic Usage

tsx

1<TextReveal text="Hello, world!" variant="blur" />

Advanced Usage

tsx

1<TextReveal2  text="Hello, world!"3  variant="blur"4  className="text-2xl font-bold"5  delayPerWord={0.1}6  duration={1}7/>

Blur: Blur the text
Chat: Chat-like effect
Pop: Pop-like effect

tsx

1// Blur2<TextReveal text="Hello, world!" variant="blur" className="text-2xl font-bold" delayPerWord={0.1} duration={1} />3
4// Chat5<TextReveal text="Hello, world!" variant="chat" className="text-2xl font-bold" delayPerWord={0.1} duration={1} />6
7// Pop8<TextReveal text="Hello, world!" variant="pop" className="text-2xl font-bold" delayPerWord={0.1} duration={1} />

Props

Prop	Type	Required	Default	Description
text	string	No	—	The text to reveal
variant	string	No	—	The variant of the text reveal
className	string	No	—	The class name of the text reveal
delayPerWord	number	No	—	The delay per word
duration	number	No	—	The duration of the text reveal

Best Practices

Cap stagger so long strings stay near the UI budget (≤280ms per word + capped delay).
Prefer ease-out / bounce: 0 springs — never backOut overshoot.
Under reduced motion, render plain text with no stagger.
Use for occasional/first-view copy, not high-frequency UI chrome.