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.

✨ Features

• 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

🛠 How to Use

• 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