Scroll Text Fill

How It Works

ScrollTextReveal creates a cinematic, scroll-driven text reveal effect that gradually illuminates text as visitors scroll down the page. It intelligently parses any nested text layer into individual words or characters, applying ultra-smooth CSS-driven transitions directly on the GPU. By updating CSS custom properties on scroll rather than forcing React re-renders, it maintains a lock-solid 60 FPS performance.

Setup Guide

• Step 1 — Add the component

  Copy the ScrollTextReveal code component into your Framer project.

• Step 2 — Place it on your canvas

  Drag an instance of ScrollTextReveal onto your canvas frame where you want your text section to appear.

• Step 3 — Prepare & connect your text

  • Create a native Framer Text layer and place it off-canvas or outside your main breakpoint frame.

  • Enclose the text layer inside a Stack frame and set the text width to Fill so it stays fully responsive.

  • Select your ScrollTextReveal component, open the property panel on the right, and select that text layer stack using the Text Layer control.

• Step 4 — Customize controls

  Fine-tune the scroll triggers and reveal style using the exposed property controls:

  • Text Layer: The target Framer Text layer to animate.

  • Granularity: Choose between Character (letter-by-letter reveal) or Word (word-by-word reveal).

  • Start Trigger %: The viewport position (% from top) where text begins revealing as you scroll down (default: 80%).

  • End Trigger %: The viewport position (% from top) where text completes its full reveal (default: 20%).

  • Feather Width: Controls the gradient smoothness / overlap transition between revealed and unrevealed segments.

  • Dim Opacity: The initial opacity of unrevealed text before scrolling into view (default: 0.2).

License

Free for personal and commercial work, including templates you sell. Not for resale or redistribution as a standalone component.