Scroll Text Fill
Scroll Text Fill is an interactive text component that gradually transitions color based on scroll progress. Starting from a base color, the text fills into a secondary color as the user scrolls, creating a smooth and engaging visual effect. With flexible dir
About this Component
Scroll-based interaction The text color fills progressively based on the user’s scroll position
Dual-layer text structure Built with separate base and fill layers for precise mask-based rendering
Direction control Choose from Left → Right, Right → Left, Top → Bottom, or Bottom → Top
Fully customizable Edit text, font family, font size, base color, and fill color
Clean property UI Direction is provided as a dropdown for a clean and intuitive control experience
Responsive & reusable Designed to work across layouts and easily reused as a component
