How to use it: It is completely plug-and-play. Just drag and drop the component onto your canvas, type your headline, pick your base and highlight colors, and tweak the animation settings in the sidebar. Zero coding required!
This component is perfect for adding a polished, high-end feel to your typography:
Hero Headlines: Create a captivating first impression by having your main headline smoothly fill with color as the user lands on the page.
Feature Callouts: Highlight key phrases or value propositions word-by-word to guide the user's reading pace.
Lyrics & Captions: Recreate the trendy "karaoke" style text reveal for audio/video-centric websites.
Loading States: Use the progressive fill animation as a creative, text-based loading indicator.
🔤 Granular Animation Control: Choose exactly how the text fills up. You can animate it letter-by-letter, word-by-word, or line-by-line.
🧭 4 Fill Directions: Control the flow of the animation. Reveal text from Left-to-Right, Right-to-Left, Top-to-Bottom, or Bottom-to-Top.
🎨 Dual-Color System: Set a subtle base color (like a muted grey) and watch it get overwritten by your vibrant Highlight Color.
⏱️ Advanced Stagger & Timing: Dial in the exact Stagger Delay between each letter or word. Fully integrated with Framer's native transition physics (Spring or Tween).
🎬 Custom Progress States: Don't want it to fill to 100%? You can manually set the Start and End states for precise visual control.
✏️ Full Typography Integration: Works seamlessly with Framer's native font system. Customize the font family, weight, size, and line height directly from the properties panel.
monirul polash
