AnimatedSVGUnderline

The component is fully responsive, scaling the underline to perfectly match any text length.

The component is fully responsive, scaling the underline to perfectly match any text length. You can customize everything—fonts, colors, animation timing, and underline thickness—directly in the properties panel. It also supports reduced motion for better accessibility. Key Features Dynamic Animation: A hand-drawn underline smoothly draws on hover and erases on exit. Visual Variety: Cycles through six unique, pre-designed SVG underline styles to keep interactions fresh and organic. Fully Responsive: Automatically measures text width and scales the underline to match perfectly without distortion. Highly Customizable: Easily control text, fonts, colors, stroke width, spacing, and animation settings from the property panel. Accessible Design: Automatically respects user preferences by disabling animations for those who have enabled reduced motion.