Text Reveal Card
Card with a sliding reveal mechanism that uncovers hidden text on mouse drag.
Preview
Text Reveal Card
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Interactive storytelling and progressive reveal sections.
Why this component matters
The drag-to-reveal mechanic gives users agency, making the content feel personally discovered.
Usage guidance
Use for before/after text or to reveal a punchline. The hidden text should be a meaningful contrast to the visible text.
Installation
bash
npx shadcn@latest add @aceternity/text-reveal-cardUsage
example.tsxtsx
import { TextRevealCard } from "@/components/ui/text-reveal-card";
export default function Example() {
return (
<TextRevealCard>
{/* Your content here */}
</TextRevealCard>
);
}Source
text-reveal-card.tsx
components/ui/text-reveal-card.tsx