ScrollLetterReveal — Scroll-driven letter-by-letter title rev

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 😃