Text Letter Filler is an animated text component that creates a cinematic letter-by-letter fill effect. Each character starts as an outline, then fills from bottom to top with a fluid clip-path reveal, subtle bounce, and optional glow. Ideal for hero headlines, landing page headers, scroll-triggered reveals, and any text that needs to make a lasting first impression.
Bottom-to-top letter fill. Each letter fills with a smooth clip-path reveal, creating a liquid-fill effect within the character shape. Paired with a subtle bounce and scale pulse for premium motion.
Four built-in presets. Choose from Minimal, Neon, Gold, or Frost for instant visual styles, or go fully Custom with complete control over fill, outline, and glow colors.
Multiple animation triggers. Fire the animation on scroll into view, on hover, or set it to loop continuously. Set stagger delay, fill speed, direction, and loop pause.
Adjustable glow effect. Add a natural glow around each letter with a customizable radius.
Hover interaction effects. Layer a Glow, Lift, or Scale hover effect on top of the fill animation for added interactivity.
Text — the text to display
Font — font family and weight picker
Font Size — 16px to 200px
Alignment — left, center, or right
Preset — Custom, Minimal, Neon, Gold, or Frost
Fill — the filled letter color
Outline — the outlined stroke color
Glow — the glow light color
Stroke Width — outline thickness
Glow toggle — enable or disable the glow effect
Glow Radius — controls the size of the glow halo around each letter
Trigger — On View, On Hover, or Loop
Direction — Left to Right, Right to Left, or Random
Stagger — delay between each letter
Fill Speed — duration of each letter's fill
Loop Pause — pause duration before restarting (loop mode only)
Hover Effect — None, Glow, Lift, or Scale
Hero section headlines. Create an unforgettable first impression with animated headings that fill as visitors scroll into view.
Landing page headers. Draw attention to key messaging with letter-by-letter reveals triggered on scroll or hover.
Portfolio and creative sites. Use Neon or Gold presets to match bold, expressive brand identities without writing any code.
Call-to-action emphasis. Loop the fill animation on important text to keep visitor attention focused where it matters.
Drop it onto any page, pick a preset or customize your own, and watch your text come alive in seconds.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
