Cursor Text Reveal — React Component

An immersive cursor-following spotlight that reveals alternate text, gradients, or imagery beneath perfectly aligned headline layers.

Motion Effectshoverspringmagneticcursortextrevealspotlightmaskheroframer-motion

Text Reveal

Playground

Shape the component before you copy it.

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

baseText

Primary text layer visible by default.

revealText

Secondary text revealed inside the circular cursor mask.

backgroundImage

Optional full-card background image for cinematic image reveals.

backgroundPosition

CSS background-position for the full-card background image.

revealImage

Image URL used in image reveal mode.

revealImagePosition

CSS background-position for the image revealed inside the cursor mask.

mode

Reveal text or an image/texture layer beneath the base text.

maskSize

Expanded circular spotlight radius in pixels.

Generated JSX

Copy this into your page.

<CursorTextReveal
  baseText=""
  revealText=""
  backgroundImage=""
  backgroundPosition="center"
  revealImage=""
  revealImagePosition="center"
  mode="text"
  maskSize={240}
/>

Image Reveal

Playground

Shape the component before you copy it.

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

baseText

Primary text layer visible by default.

revealText

Secondary text revealed inside the circular cursor mask.

backgroundImage

Optional full-card background image for cinematic image reveals.

backgroundPosition

CSS background-position for the full-card background image.

revealImage

Image URL used in image reveal mode.

revealImagePosition

CSS background-position for the image revealed inside the cursor mask.

mode

Reveal text or an image/texture layer beneath the base text.

maskSize

Expanded circular spotlight radius in pixels.

Generated JSX

Copy this into your page.

<CursorTextReveal
  baseText=""
  revealText=""
  backgroundImage=""
  backgroundPosition="center"
  revealImage=""
  revealImagePosition="center"
  mode="text"
  maskSize={240}
/>

Animation effects

hoverspringmagnetic

Copy-paste ready

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

Full-page demo

Installation

Text Reveal

Shape the component before you copy it.

Image Reveal

Shape the component before you copy it.

Animation effects