Expand an underline into a full background fill while transitioning the text color.
motion-sv
Weeklygoodiesdeliveredstraighttoyourinbox— subscribe
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/underline-to-background.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
underline-to-background.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Snippet content displayed inside the animated underline/fill treatment. |
as | keyof SvelteHTMLElements | "span" | HTML element used for the hoverable text wrapper. |
transition | Transition | { type: "spring", damping: 30, stiffness: 300 } | Motion transition used for both the underline growth and text-color change. |
targetTextColor | string | "#fef" | Text color applied while the underline has expanded into the background. |
underlineHeightRatio | number | 0.1 | Ratio of the current font size used as the resting underline thickness. |
underlinePaddingRatio | number | 0.01 | Ratio of the current font size used to offset the underline below the text baseline. |
class | string | undefined | Classes merged onto the motion-enabled wrapper element. |