component
Underline Motion
By Aashay Agrawal
Details
- Aashay AgrawalAuthor
- componentType
- 2026-05-30Published
- 2026-06-16Updated
- 2026-05-20Added
- TextCategories
Summary
Hover underline text animation
Description
Details Center Underline allows you to create polished text hover states with multiple underline animation styles. The underline can expand from the center, enter from one side and exit from the other, or start visible and animate out on hover. This makes it flexible enough for both subtle interface details and more expressive typographic interactions. Key Features Custom text input Extended font controls Custom text color Custom underline color Three animation styles Left and right direction control Adjustable animation duration Multiple easing options Adjustable underline height Adjustable underline spacing Auto-width and auto-height layout support Lightweight Framer Motion animation Animation Styles Center The underline expands smoothly from the center on hover. Comes In, Goes Out The underline enters from one direction and exits from the opposite direction. Goes Out, Comes In The underline starts visible and disappears on hover with directional motion. Property Controls
Introduction
Hover underline text animation
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1023