Text Reveal Card

text

Interactive split-view mask card revealing secret glowing text on hover.

#text#reveal#mask#interactive

Live Interactive Preview

Hover to reveal secret

You know the business.

I know the chemistry.

Component Source Code

Select language in the dropdown

TextRevealCard.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Sparkles } from 'lucide-react';
5
6export default function TextRevealCard() {
7  const [pos, setPos] = useState(50);
8  const [isHovering, setIsHovering] = useState(false);
9
10  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
11    const rect = e.currentTarget.getBoundingClientRect();
12    const x = e.clientX - rect.left;
13    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
14    setPos(percentage);
15  };
16
17  return (
18    <div
19      onMouseMove={handleMouseMove}
20      onMouseEnter={() => setIsHovering(true)}
21      onMouseLeave={() => {
22        setIsHovering(false);
23        setPos(50);
24      }}
25      className="relative w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-950 p-6 sm:p-8 select-none shadow-2xl cursor-ew-resize"
26    >
27      <div className="flex items-center gap-2 mb-4">
28        <Sparkles className="h-4 w-4 text-cyan-400" />
29        <span className="text-xs font-semibold text-slate-400">Hover to reveal secret</span>
30      </div>
31
32      <div className="relative h-14 w-full flex items-center">
33        <div className="absolute inset-0 flex items-center font-mono text-xl sm:text-2xl font-black text-slate-700">
34          You know the business.
35        </div>
36
37        <div
38          style={{ clipPath: `polygon(0 0, ${pos}% 0, ${pos}% 100%, 0 100%)` }}
39          className="absolute inset-0 flex items-center font-mono text-xl sm:text-2xl font-black text-cyan-400 [text-shadow:0_0_15px_rgba(6,182,212,0.8)]"
40        >
41          I know the chemistry.
42        </div>
43
44        <div
45          style={{ left: `${pos}%` }}
46          className="absolute top-0 bottom-0 w-[2px] bg-cyan-400 shadow-[0_0_10px_#22d3ee] pointer-events-none"
47        />
48      </div>
49    </div>
50  );
51}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/TextRevealCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import TextRevealCard from '@/components/text/TextRevealCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <TextRevealCard />
7    </main>
8  );
9}