Text Reveal Card

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

Cardshovergradientlayoutcardrevealhoverspotlightportfolio

Hover over the text area to see the magic.

I ship the final narrative

Playground

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.