Cursor Mask Text is an interactive text animation component that transforms ordinary headlines into engaging hover experiences. By layering two text versions and revealing one through a moving mask, it creates a dynamic effect that responds directly to user interaction.

On touch devices, the component automatically switches to a tap-to-toggle interaction, ensuring a seamless experience across desktop, tablet, and mobile.

Perfect for hero sections, portfolio websites, landing pages, product showcases, creative agencies, and interactive typography.

Demo

What Makes It Stand Out

• Interactive cursor-following text reveal effect

• Smooth masked typography animation

• Tap-to-toggle reveal for touch devices

• Four reveal directions: Left to Right, Right to Left, Top to Bottom, and Bottom to Top

• Multiple divider styles: Solid, Soft, Glow, and None

• The divider automatically stays within component bounds

• Independent styling for base and reveal text layers

• Fully responsive and touch-friendly

• Lightweight and performance-optimized

Customizations

• Base Text

• Reveal Text

• Base Font

• Base Color

• Reveal Font

• Reveal Color

• Text Alignment

• Reveal Direction

• Divider Style

• Divider Color

• Divider Size

Usage

1. Add Cursor Mask Text to your Framer canvas.

2. Enter your Base Text and Reveal Text.

3. Choose a reveal direction and text alignment.

4. Customize the divider style, color, and size.

5. That's it, you're done!