Text Reveal Card — React Component

Interactive spotlight card with mouse-follow glow and bottom reveal content for features, case studies, and portfolio sections.

Cardshovergradientlayoutcardrevealhoverspotlightportfolio

Text Reveal Card

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Main card heading displayed in the content area.

description

Default bottom content shown when revealContent is not provided.

image

Optional top image URL rendered as card media.

revealClassName

Optional class names for the reveal content container.

intensity

Controls spotlight/reveal intensity. Clamped between 0.5 and 2.2.

disabled

Disables interactive reveal and hover elevation.

Generated JSX

Copy this into your page.

<Sparkles
  title=""
  description=""
  image=""
  revealClassName=""
  intensity={1}
  disabled={false}
/>

Animation effects

hovergradientlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Text Reveal Card

The Text Reveal Card hides secondary text beneath a masked overlay that reveals on hover using CSS clip-path animation driven by cursor position. Moving the cursor across the card shifts the clip boundary, uncovering hidden content progressively. Spring physics smooth the mask transition for a fluid feel. Use it for feature cards that tease additional context, before/after reveals, and testimonial cards where the full quote is revealed on interaction.

Common use cases

Feature reveal and detail cards
Testimonial card reveals
Before/after content displays
Product description hover effects