Stroke Text Effect
Bring your headlines to life with animated SVG text for Framer. Perfect for bold words, hero sections, or footer branding, this component lets you animate stroke and fill (solid or gradient), adjust stroke width, and pick from stroke flow or bounce effects. With full control over fonts, timing, and looping, it’s built for adding dynamic, modern text accents to your designs.
Smooth animated stroke and fill transitions
Solid or gradient options for stroke and fill
Two animation types: stroke flow and bounce
Adjustable animation duration and stroke width
Optional looping with custom delay
Full font, letter spacing, and text customization
Responsive design, accessible with aria-label
Add the component to your Framer canvas
Enter text and select fonts in property controls
Choose solid or gradient colors for stroke and fill
Pick animation type and adjust duration
Enable looping and set delay if needed
Adjust stroke width and tag as desired
Use Preview toggle to play/pause animations in canvas mode
Saeef
