React Text Reveal

Powered by

Motion

Most text reveal effects just use simple opacity transitions or basic slide animations that feel generic. This component creates an interactive reveal where moving your cursor horizontally unveils hidden text using clip-path animations. The effect feels like wiping away a layer to discover what's underneath, creating engaging, discoverable content.

Cursor-controlled text reveal with clip-path animations

Hidden text that reveals as you move your cursor across it:

import { TextReveal } from '@/components/ui/shadcn-io/text-reveal';const TextRevealDemo = () => {  return (    <div className="flex items-center justify-center p-8 bg-black rounded-lg">      <TextReveal        text="You know the business"        revealText="I know the chemistry"        className="h-20"      />    </div>  );};export default TextRevealDemo;

'use client';import React, { useEffect, useRef, useState } from 'react';import { motion } from 'motion/react';import { cn } from '@/lib/utils';export const TextReveal = ({  text,  revealText,  className,}: {  text: string;  revealText: string;  className?: string;}) => {  const [widthPercentage, setWidthPercentage] = useState(0);  const containerRef = useRef<HTMLDivElement>(null);  const [left, setLeft] = useState(0);  const [localWidth, setLocalWidth] = useState(0);  const [isMouseOver, setIsMouseOver] = useState(false);  useEffect(() => {    if (containerRef.current) {      const { left, width: localWidth } =        containerRef.current.getBoundingClientRect();      setLeft(left);      setLocalWidth(localWidth);    }  }, []);  function mouseMoveHandler(event: React.MouseEvent<HTMLDivElement>) {    event.preventDefault();    const { clientX } = event;    if (containerRef.current) {      const relativeX = clientX - left;      setWidthPercentage((relativeX / localWidth) * 100);    }  }  function mouseLeaveHandler() {    setIsMouseOver(false);    setWidthPercentage(0);  }  function mouseEnterHandler() {    setIsMouseOver(true);  }  function touchMoveHandler(event: React.TouchEvent<HTMLDivElement>) {    event.preventDefault();    const clientX = event.touches[0]!.clientX;    if (containerRef.current) {      const relativeX = clientX - left;      setWidthPercentage((relativeX / localWidth) * 100);    }  }  return (    <div      onMouseEnter={mouseEnterHandler}      onMouseLeave={mouseLeaveHandler}      onMouseMove={mouseMoveHandler}      onTouchStart={mouseEnterHandler}      onTouchEnd={mouseLeaveHandler}      onTouchMove={touchMoveHandler}      ref={containerRef}      className={cn(        'relative flex items-center overflow-hidden cursor-pointer',        className      )}    >      {/* Revealed text layer */}      <motion.div        style={{          width: '100%',        }}        animate={          isMouseOver            ? {                opacity: widthPercentage > 0 ? 1 : 0,                clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`,              }            : {                clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`,              }        }        transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}        className="absolute z-20 will-change-transform bg-black"      >        <p className="text-4xl md:text-6xl font-bold text-white">          {revealText}        </p>      </motion.div>      {/* Base text layer */}      <div className="overflow-hidden">        <p className="text-4xl md:text-6xl font-bold text-gray-400">          {text}        </p>      </div>    </div>  );};

Built with TypeScript and Motion for React applications, using clip-path animations and real-time cursor tracking. The reveal follows your mouse position precisely, creating that satisfying "wiping away" interaction that encourages exploration.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/text-reveal.json

npx shadcn@latest add https://www.shadcn.io/registry/text-reveal.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/text-reveal.json

bunx shadcn@latest add https://www.shadcn.io/registry/text-reveal.json

Usage

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

<TextReveal
  text="You know the business"
  revealText="I know the chemistry"
  className="h-20"
/>;

Why most text reveals suck

Most developers use basic CSS transitions—fade in, slide up, or simple opacity changes. The result feels predictable and passive. Users just watch text appear without any control or interaction. There's no exploration, no discovery, just another automatic animation.

This React component uses cursor-based clip-path animations that respond to mouse movement in real-time. Moving left to right gradually reveals the hidden text through precise clip-path calculations. The revealed text appears with smooth transitions while the base text remains visible underneath, creating depth and context.

The key insight: interactive reveals create engagement. When users control the reveal speed and direction with their cursor, they feel agency over the content discovery. The clip-path approach ensures smooth, pixel-perfect reveals that feel natural and responsive.

Features

• Real-time cursor tracking with precise clip-path reveal animations for React applications
• Smooth transitions between hidden and revealed states using Motion animations
• Touch support for mobile devices with equivalent swipe-based reveals
• Configurable text content with separate base and reveal text options
• Complete TypeScript support with proper event handling and ref management
• Performance optimized with efficient DOM measurements and clip-path calculations
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

TextReveal

Interactive text component with cursor-controlled reveal animations.

Optimal Usage Patterns

Design reveals that enhance content discovery:

Text Length Guidelines

Balance readability with reveal effect:

Common gotchas

Reveal doesn't follow cursor precisely: The component calculates position based on container bounds in React applications. Ensure the container has proper dimensions and positioning. Padding or margins might affect cursor tracking accuracy in TypeScript projects.

Text jumps during reveal: Both text layers should have identical styling for smooth transitions in JavaScript applications. Mismatched font sizes, weights, or line heights cause visual jumps during the clip-path animation in Next.js projects.

Mobile touch events don't work: The component includes touch handlers for mobile devices in React applications. However, continuous touch tracking differs from mouse movement. Consider longer touch interactions or alternative mobile reveals in TypeScript projects.

Performance issues on complex layouts: Clip-path animations are GPU-accelerated but frequent cursor updates can impact performance in JavaScript applications. The component uses efficient event handling and requestAnimationFrame for smooth animations in React projects.

Accessibility concerns for screen readers: Screen readers may not interpret the reveal interaction intuitively in TypeScript applications. Consider providing alternative text access or keyboard navigation options for inclusive experiences in Next.js projects.

Integration with other components

Perfect for hero sections in Card layouts or interactive headers in Sheet overlays within React applications. Works excellently with Button components for action-reveal combinations in Next.js projects.

For storytelling interfaces, combine with Progress indicators or Tabs for sequential reveals. This TypeScript component pairs well with Badge for category reveals and Avatar for profile information discovery, all with seamless shadcn/ui integration.

Questions developers actually ask