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 Component 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 Add Cursor Mask Text to your Framer canvas. Enter your Base Text and Reveal Text . Choose a reveal direction and text alignment. Customize the divider style, color, and size. That's it, you're done!

Interactive text reveal on hover