A Framer marketplace component that animates a headline one character at a time as the visitor scrolls. The result is closer to a film title sequence than a marketing fade-up.

TL;DR

• Per-letter scroll-driven reveal for any headline or block of copy.

• Drop-in Framer component, no code, responsive across breakpoints.

• Best for hero statements, manifestos, and editorial section openers.

What Scroll Letter Reveal Does

You write a headline. The component splits it into individual letters and ties the reveal of each letter to scroll position. As the visitor moves down the page, characters appear in sequence — typically combining opacity, vertical offset, and blur to give each letter weight before it lands.

It is a scrollytelling primitive. Instead of one block of text animating in together, the sentence forms in front of the reader at their own pace.

Why Use It

Standard fade-up text reveals are everywhere on Framer sites. They were a 2022 trick and they now read as a default. The problem with a default is that nothing on the page is doing the work of brand differentiation.

Per-letter reveals fix that. They force the eye to read the words instead of skimming them, which is exactly what you want on:

• A hero with a strong copy bet, where the headline is the brand promise.

• A manifesto page where the entire argument lives in one paragraph.

• A case study opener where the title needs to feel like a chapter break.

You also get a usability win: the staggered timing slows the perceived scroll, which keeps visitors on the section longer without any dark patterns.

Features

• Per-character scroll-driven animation, tied to viewport position.

• Adjustable stagger, easing, and reveal distance.

• Works with any web-safe or custom font loaded in your Framer project.

• Responsive — characters reflow correctly across breakpoints.

• Lightweight: animations use CSS transforms, GPU-accelerated.

• Compatible with Framer's standard text style system.

How to Install in Framer

1. Open the Scroll Letter Reveal marketplace listing.

2. Click Insert to add the component to your Framer project.

3. Drag the component onto your canvas where the headline should live.

4. Open the right-hand properties panel and edit the text content.

5. Adjust stagger, easing, and reveal distance to taste.

6. Preview in the Framer canvas — scroll inside the preview to test the reveal.

Ship It

Install Scroll Letter Reveal from the Framer Marketplace.

Back to the full kit: Best Framer Components 2026 →