Line Hover Link
Subtle and elegant underline hover animations for links. Easy-to-remember variant names!
Loading Preview...
Features
- 11 Animation Variants: Easy-to-remember names like slide, double, grow, bounce
- Pure CSS Animations: Maximum performance, no JavaScript overhead
- Dark Mode Ready: Uses
currentColorfor automatic theming - Accessible: Standard anchor element with proper semantics
Installation
npx shadcn@latest add "https://www.vengenceui.com/r/line-hover-link.json"Usage
Basic Usage
Loading Preview...
Navigation Example
Loading Preview...
SVG-Based Effects
Loading Preview...
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| variant | LineHoverVariant | 'slide' | The animation variant. See Variant Guide below. |
| children | React.ReactNode | - | The link content. |
| href | string | - | The URL the link points to. |
| className | string | - | Additional CSS classes to apply. |
Variant Guide
| Variant | Effect | Best For |
|---|---|---|
| slide | Line slides in from right | Navigation links |
| double | Two lines animate together | Bold statements |
| grow | Line grows thicker on hover | Emphasis |
| strike | Strikethrough + text scales | Call to action |
| fade | Lines fade up with stagger | Elegant effect |
| pulse | Line pulses up and down | Dynamic feel |
| swap | Lines go opposite directions | Unique style |
| sweep | Full background sweep | Strong emphasis |
| bounce | Bouncy squish animation | Playful effect |
| arc | SVG arc stroke draws in | Sign-up CTAs |
| scribble | SVG scribble draws in | Handwritten feel |