---
title: "Cursor Mask Text — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Aviral Lakhanpaul · Text. Cursor Mask Text is an interactive text animation component that transforms ordinary headlines into engaging hover experiences."
canonical: "https://framer.elliotli.dev/component/cursor-mask-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Cursor Mask Text

# Cursor Mask Text

Interactive text reveal on hover

[View on Framer](https://framer.com/marketplace/components/cursor-mask-text/?via=elliot-li)

![Cursor Mask Text preview image 1](https://framer.elliotli.dev/og/component/cursor-mask-text/3109f748d937aef3/1600x1200.jpg)

## Summary

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

## Description

**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

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!
    

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-o0lcz755-3GMksOFeiHdDkmjZdtPpF1T0hXlg80)](https://polar.sh)

## Rank history [How rankings work →](/terms#rankings)

-   All · #5548

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $6.00
- **Published**: 2026-06-11
- **Updated**: 2026-07-02
- **Added**: 2026-06-07
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing