TextNew
Comes In Goes Out Underline
On hover a line slides in under the link from one side and leaves through the other when the cursor goes away. A clean effect for navigation.
Customize
underlineFrom
underlineTo
Based on Underline Comes In Goes Out (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The link text. |
| direction | 'left' | 'right' | "left" | Which side the line comes in from. |
| underlineHeightRatio | number | 0.1 | Line thickness relative to the font size. |
| underlinePaddingRatio | number | 0.01 | Gap between line and text relative to the font size. |
| transition | ValueAnimationTransition | "{ duration: 0.4, ease: 'easeInOut' }" | Duration and easing of the line. |
| as | ElementType | "span" | HTML tag of the element. |
| className | string | — | Extra classes. |
| underlineFrom | string | "#ffffff" | Colour at the start of the underline. It fades into the second colour. |
| underlineTo | string | "#a1a1aa" | Colour at the end of the underline. |
Dependencies
2 required packages
npm install clsx motion