---
title: "On Scroll Text Mask  — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Nabeel · Text. About This code creates a special effect for text on websites."
canonical: "https://framer.elliotli.dev/component/on-scroll-text-mask"
---

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

# On Scroll Text Mask

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

![On Scroll Text Mask  preview image 1](https://framer.elliotli.dev/og/component/on-scroll-text-mask/ca6de323b899e594/1600x1200.jpg)

## Summary

About This code creates a special effect for text on websites.

## Description

## About

This code creates a special effect for text on websites. It makes words appear gradually as people scroll down the page. The text is revealed using a moving mask, which can be different shapes like a line, circle, or cone. As you scroll, this mask moves to show more of the text. Users can change many things about how the text looks and how it appears, like its color, size, and how fast it shows up. This effect makes reading on a website more interesting and fun.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy and paste the GradientMask component into your project file
    
2.  Enter your desired text in the Text field in the properties panel
    
3.  Customize the appearance settings - adjust colors, font properties, and text layout
    
4.  Configure the mask settings by choosing the mask type and adjusting the mask angle and width
    
5.  Fine-tune the animation by setting the reveal distance and scroll offset to control when and how the text appears
    
6.  Test the animation in preview mode to see how it responds to scrolling
    

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-p9gyee90-O6iFktlGraFFYnpjPjGaAbEbrDLTiP)

The component uses several customizable properties:

-   Text content and styling (font, size, color, line height)
    
-   Mask properties (type, angle, width)
    
-   Animation controls (reveal distance, scroll offset)
    
-   Three mask types: linear (straight), radial (circular), and conic (rotating)
    

## What You Get

When you purchase this component, you'll receive:

-   **The Component Itself** - Full access to the component all future updates
    
-   **Remix File with Component Setup** - A complete Remix file with the component pre-configured and ready to integrate into your project.
    
-   **Setup Instructions** - Clear, step-by-step instructions to help you implement the component quickly and correctly.
    
-   **Dedicated Support** - Direct access to our team for assistance if you encounter any issues during setup or implementation.
    

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Refund Policy

If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.

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

-   All · #11273

## Details

- **Author**: Nabeel
- **Price**: $14.00
- **Published**: 2025-10-03
- **Updated**: 2025-10-03
- **Added**: 2025-09-29
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos