Docs
→Underline To Background
Underline To Background
A text component that animates a text underline into a text background.
Weeklygoodiesdeliveredstraighttoyourinbox—subscribe
Source code
Understanding the component
The component creates a separate div element positioned absolutely below the text (instead of the regular underline elements with CSS pseudo-elements). It animates the height from a thin line (controlled by underlineHeightRatio) to cover the full text height, effectively becoming a background. Simultaneously, it transitions the text color to maintain contrast against the expanding background.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | - | The text to be displayed |
| className | string | undefined | Additional CSS classes for styling |
| transition | ValueAnimationTransition | { type: "spring", damping: 30, stiffness: 300 } | Animation configuration for the underline-to-background effect. Refer to framer-motion docs for more details |
| onClick | () => void | undefined | Callback function when the text is clicked |
| targetTextColor* | string | "#fef" | The color of the text when the background animation is complete |
| underlineHeightRatio | number | 0.1 | The height of the underline as a ratio of the font size |
| underlinePaddingRatio | number | 0.01 | The padding of the underline as a ratio of the font size |