Docs
→Text
→Underline To Background
Underline To Background
A text component that animates a text underline into a text background.
Weeklygoodiesdeliveredstraighttoyourinbox—subscribe
Installation
1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/underline-to-background.json"
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 |
|---|---|---|---|
| children* | React.ReactNode | - | The content to be displayed and animated |
| as | ElementType | "span" | HTML Tag to render the component as |
| className | string | undefined | Optional class name for styling |
| transition | ValueAnimationTransition | { type: "spring", damping: 30, stiffness: 300 } | Animation transition configuration |
| targetTextColor* | string | "#fef" | The color that the text will animate to on hover |
| underlineHeightRatio | number | 0.1 | Height of the underline as a ratio of font size |
| underlinePaddingRatio | number | 0.01 | Padding of the underline as a ratio of font size |