5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T859,

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.

5a:[["$","$L5d",null,{"post":{"id":"019e7939-2def-7116-b886-54ba83084223","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"990963a3-803e-491f-a26c-d4750f41b16f","name":"Aman Qureshi","slug":"aman-qureshi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/252560/rOvOn3jLx-E4375n3Ab1LYfqMxO2ATS4lqRyA0jJ","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Oq2U5jJhrTpmFXkDHbjW","resolved":true,"title":"InkFill","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"InkFill — Scroll-Driven Ink-Fill Text Reveal"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Five reveal directions to match your section's mood:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bottom → Top — classic upward fill for headlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Top → Bottom — fills downward for descending hierarchy"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Left → Right — natural reading-direction sweep"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Right → Left — reverse sweep for emphasis"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Center Out — dramatic, balanced fill from the middle"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"Key features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven ink-fill text reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Five reveal directions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pin Section mode for scroll-locked reveals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal by character or word"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable Scroll/Pin timing controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Framer font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive — auto re-splits on resize"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple independent instances per page"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"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","slug":"inkfill","author":{"framerUserId":"990963a3-803e-491f-a26c-d4750f41b16f","name":"Aman Qureshi","slug":"aman-qureshi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/252560/rOvOn3jLx-E4375n3Ab1LYfqMxO2ATS4lqRyA0jJ","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Oq2U5jJhrTpmFXkDHbjW/inkfill-7rAJpYJEkE9zV5f4uP4fEvCdn8cbPw","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-16T08:15:21.924Z","updatedAt":"2026-08-24T07:37:12.022Z","publishedAt":"2026-05-30T14:10:50.991Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/TextFill-ammrOT.js@NXMDu5TwHou17ue2Uz05","previewUrl":"https://scroll-highlight-text.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"NXMDu5TwHou17ue2Uz05","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T14:10:50.991Z","updatedAt":"2026-05-30T14:10:50.991Z","reported":false}}],"$L5f"]

Suggested for you