ink-fill highlight as users scroll. Drop it into any section, set your colors, and get refined, on-brand motion without touching timelines, keyframes, or Code Overrides.
Built on GSAP and SplitType, it splits your text into real visual characters or words and animates each one with precise timing tied to scroll position — giving your pages the polish of a custom-coded site, with none of the setup.
Choose from five reveal directions to match your section's mood:
Bottom → Top — classic upward fill for headlines and statements.
Top → Bottom — fills downward, great for descending hierarchy.
Left → Right — horizontal sweep, reading-direction natural.
Right → Left — reverse sweep for emphasis and contrast.
Center Out — fills outward from the middle, dramatic and balanced.Toggle Pin Section to decide how the animation plays:
Off — lines reveal naturally as they enter the viewport. Each line tracks its own scroll position with precise Scroll Start and Scroll End controls.
On — the section locks in place while the user scrolls, and lines reveal one by one across the pinned scroll distance. Perfect for cinematic hero statements and scroll-locked storytelling moments.
Typography is handled through native Framer font controls, so your text styles exactly like any other text layer. A built-in ResizeObserver automatically re-splits lines when the viewport width changes — responsive behavior is handled for you.
Fine-tune the reveal with Pin Start and Pin Length sliders when in pin mode, or Scroll Start and Scroll End when not — giving you precise control over exactly when and how the animation fires.
Scroll-driven ink-fill text reveal
Five reveal directions: Bottom→Top, Top→Bottom, L→R, R→L, Center Out
Pin Section mode for cinematic scroll-locked reveals
Reveal by Character or Word
Adjustable Scroll Start, Scroll End, Pin Start, and Pin Length
Native Framer font controls
Fully responsive — lines auto re-split on resize
Multiple instances run independently on the same page
