InkFill is a plug-and-play Framer component that animates your text with a smooth ink-fill highlight as users scroll. Drop it into any section, set your colors, and get refined, on-brand motion — no timelines, keyframes, or Code Overrides.
Built on GSAP and SplitType, it splits your text into real characters or words and animates each with precise timing tied to scroll position, giving your pages the polish of a custom-coded site with none of the setup.
Five reveal directions to match your section's mood:
Bottom → Top — classic upward fill for headlines
Top → Bottom — fills downward for descending hierarchy
Left → Right — natural reading-direction sweep
Right → Left — reverse sweep for emphasis
Center Out — dramatic, balanced fill from the middle
Pin Section toggles how it plays. Off: lines reveal naturally as they enter the viewport, each tracking its own scroll position. On: the section locks while lines reveal one by one — perfect for cinematic, scroll-locked hero moments.
Typography uses native Framer font controls, so text styles like any other layer. A built-in ResizeObserver re-splits lines on resize, so responsive behavior is handled for you. Fine-tune with Pin Start and Pin Length in pin mode, or Scroll Start and Scroll End when not.
Scroll-driven ink-fill text reveal
Five reveal directions
Pin Section mode for scroll-locked reveals
Reveal by character or word
Adjustable Scroll/Pin timing controls
Native Framer font controls
Fully responsive — auto re-splits on resize
Multiple independent instances per page
Due to the digital nature of this product, all sales are final. If you hit any issues, reach out — I'm happy to troubleshoot and make sure InkFill works correctly in your project.
