Cursor Mask Text

Cursor Mask Text is an interactive text animation component that transforms ordinary headlines into engaging hover experiences.

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!