Stroke Text FX

Stroke Text FX is a dynamic animated text component built for Framer that uses SVG-based stroke animations to transform static typography into engaging, motion-driven visuals.

It supports both stroke and fill animations, allowing designers to create bold typographic effects with solid or gradient styling while maintaining full control over motion behavior.

Key features include

• Smooth animated transitions between stroke and fill states

• Support for solid colors and gradient stroke or fill styles

• Two animation modes including stroke flow and bounce effects

• Adjustable animation duration for fine-tuned motion control

• Configurable stroke width for different visual weights

• Optional looping with customizable delay timing

• Full typography controls including font, spacing, and sizing

• Responsive behavior optimized for modern layouts

• Accessible design with aria-label support

How to use

• Add the Stroke Text FX component to your Framer canvas

• Enter your text and select desired font styles

• Choose between solid or gradient stroke and fill options

• Select animation type and adjust duration settings

• Enable looping and configure delay if needed

• Adjust stroke width and tag type based on design requirements

• Use preview mode to test animation behavior in canvas

Best for

• Hero headlines and landing page typography

• Brand logos and animated wordmarks

• Footer branding and section dividers

• Marketing pages and promotional banners

• Modern UI accents and creative storytelling sections

Stroke Text FX turns static text into expressive animated typography that enhances visual hierarchy and adds a modern, high-impact design feel to any Framer project.