Animated Text Fill — Framer Code Component

Preview

Create bold typographic reveals with layered color panels animated directly inside your text.

Animated Text Fill is a responsive Framer code component with editable typography, multiline support, up to eight custom colors, four reveal directions, and three animation triggers.

Features:

• Up to eight editable color panels
• Left, right, top, and bottom reveals
• Loop, in-view, and hover triggers
• Replay once or whenever the component re-enters the viewport
• Custom fonts, spacing, line height, and letter case
• Adjustable timing, delay, and easing
• Custom hard-shadow controls
• Automatic responsive fitting
• Reduced-motion support
• Static-renderer fallback
• No external dependencies

Perfect for hero headlines, portfolio intros, campaign pages, editorial layouts, and expressive landing pages.