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 { motion, useReducedMotion, Variants } from "motion/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
14const EASE_OUT = [0.23, 1, 0.32, 1] as const;15
16export const TextReveal = ({17  text,18  variant = "blur-sm",19  className,20  delayPerWord = 0.05,21  duration = 0.28,22}: TextRevealProps) => {23  const reduce = useReducedMotion();24  const words = text.trim().split(/\s+/);25  // Cap total stagger so long strings stay under ~300ms + duration26  const stagger = Math.min(delayPerWord, 0.28 / Math.max(words.length, 1));27  const dur = Math.min(duration, 0.28);28
29  if (reduce) {30    return (31      <span32        className={cn(33          "inline-flex flex-wrap items-baseline text-(--color-ink)",34          className,35        )}36      >37        {words.map((word, i) => (38          <span key={i} className="inline-block whitespace-pre">39            {word}40            {i < words.length - 1 ? "\u00A0" : null}41          </span>42        ))}43      </span>44    );45  }46
47  const variants: Record<NonNullable<TextRevealProps["variant"]>, Variants> = {48    "blur-sm": {49      hidden: { opacity: 0, filter: "blur(4px)", y: 6 },50      visible: (i: number) => ({51        opacity: 1,52        filter: "blur(0px)",53        y: 0,54        transition: {55          delay: i * stagger,56          duration: dur,57          ease: EASE_OUT,58        },59      }),60    },61    chat: {62      hidden: { opacity: 0, x: -6 },63      visible: (i: number) => ({64        opacity: 1,65        x: 0,66        transition: {67          delay: i * stagger,68          duration: dur,69          ease: EASE_OUT,70        },71      }),72    },73    pop: {74      hidden: { opacity: 0, scale: 0.95 },75      visible: (i: number) => ({76        opacity: 1,77        scale: 1,78        transition: {79          delay: i * stagger,80          type: "spring",81          bounce: 0,82          duration: dur,83        },84      }),85    },86  };87
88  return (89    <motion.span90      initial="hidden"91      animate="visible"92      className={cn(93        "inline-flex flex-wrap items-baseline text-(--color-ink)",94        className,95      )}96    >97      {words.map((word, i) => (98        <motion.span99          key={i}100          custom={i}101          variants={variants[variant]}102          className="inline-block whitespace-pre"103        >104          {word}105          {i < words.length - 1 ? "\u00A0" : null}106        </motion.span>107      ))}108    </motion.span>109  );110};

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.