---
title: "Scroll Text Effects — 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/scroll-text-effects"
---

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

# Scroll Text Effects

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

![Scroll Text Effects preview image 1](https://framer.elliotli.dev/og/component/scroll-text-effects/062cea1796d49700/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 in a fun way as people scroll down the page. The text starts off hard to see, then gradually becomes clear and normal. It does this by changing several things about how the text looks while scrolling. The effect can be applied to whole words or individual letters. Users can adjust many settings to change exactly how this effect works and looks.

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 StickyBlurReveal component into your Framer project file
    
2.  Wrap the component in a layer that is 100vh and set the container to sticky
    
3.  Now wrap that container inside another container with a height that represents the scroll duration
    
4.  Add the component to your canvas and enter your desired text in the Text property
    
5.  Customize the typography settings (font, size, color, alignment) and reveal behavior (blur amount, opacity, scale, reveal distance) using the property controls panel
    
6.  Adjust the 3D transformation settings (perspective, rotation, vertical offset) to achieve your desired visual effect
    
7.  Preview your project to test the scroll-triggered animation and fine-tune the settings as needed
    

## How It Works

The component includes comprehensive property controls for text content, typography (font, size, color, alignment, line height), reveal settings (full reveal distance, initial blur amount, opacity, scale), positioning (vertical offset), and 3D effects (perspective, X-rotation). All properties have intuitive ranges and step values for precise customization.

## 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 · #10212

## Details

- **Author**: Nabeel
- **Price**: $14.00
- **Published**: 2025-09-29
- **Updated**: 2025-09-27
- **Added**: 2025-09-23
- **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