Mask Cursor Text

PRO

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

mask-cursor-text-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
baseTextstringYesBase (normal) text content rendered under the mask.
maskTextstringYesText content revealed inside the mask area.
classNamestringNoWrapper class (controls layout/width).
baseClassNamestringNoClasses for the base text layer (color/typography).
maskTextClassNamestringNoClasses for the masked (revealed) text layer.
maskBgClassNamestringNoBackground color classes applied to the overlay so the base text is fully covered where masked.
initialSizenumber40NoInitial mask diameter in pixels.
hoverSizenumber320NoMask diameter in pixels on hover.
© reframe/ui 2026Built by @thommysart
More in Cursor Effects