---
title: "ScrollLetterReveal — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Umut Sevinc · Noctua · Text. Scroll-driven letter-by-letter title rev"
canonical: "https://framer.elliotli.dev/component/scrollletterreveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ScrollLetterReveal

# ScrollLetterReveal

Scroll-driven letter-by-letter title rev

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

![ScrollLetterReveal preview image 1](https://framer.elliotli.dev/og/component/scrollletterreveal/7843448565faaaa7/1600x1200.jpg)

## Summary

Scroll-driven letter-by-letter title rev

## Description

Introducing the ScrollRevealText component.

A drop-in Framer code component that reveals a title letter-by-letter as it enters the viewport. Driven by a single IntersectionObserver — no scroll listener, no rAF loop, no library. Two pins on the canvas (Start / End) define the scroll range where the reveal happens, and the component handles the rest.

How to Use and Customize

Drop the component anywhere — width 100% / height 100% — it adapts to its frame.

Set the title text via the property control. One full font control (family, weight, size, line-height, letter-spacing), plus color and alignment.

Pick a reveal direction: Left-to-right (typewriter), Center-out (both ways from the middle), or Random (seeded shuffle, stable across renders).

Speed (0.1–3) controls how fast the letters appear within the scroll range. 1 = default, sharper at higher values.

Offset (negative or positive px) shifts the reveal trigger up or down relative to its container — useful when the title is preceded by hero copy.

Pure CSS mask + IntersectionObserver — no canvas, no WebGL, no scroll listener. Respects prefers-reduced-motion automatically.

For best results pair with a wide editorial heading. Works inside CMS detail pages, repeated titles in galleries, even nested in sticky sections.

Enjoy 😃

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

-   All · #8270

## Details

- **Author**: Umut Sevinc · Noctua
- **Price**: $7.00
- **Published**: 2026-06-15
- **Updated**: 2026-06-15
- **Added**: 2026-05-30
- **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