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 😃

Scroll-driven letter-by-letter title rev