component
InkFill
By Aman Qureshi
Details
- Aman QureshiAuthor
- componentType
- 2026-05-30Published
- 2026-08-24Updated
- 2026-05-16Added
- TextCategories
Summary
InkFill is a plug-and-play Framer component that animates your text with a smooth ink-fill highlight as users scroll.
Description
InkFill — Scroll-Driven Ink-Fill Text Reveal 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. Key features 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 Refund Policy 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.
Introduction
Scroll-Driven Text Highlight Reve
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4007