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.
Best Used For
Navigation links
Header menus
Landing page CTAs
Portfolio websites
Footer links
Editorial typography
Studio websites
Minimal interaction design
Aashay Agrawal
