# LineHoverLink

> Link component with 12 animated underline hover effects — pure CSS, no JS on hover.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: link, navigation, hover, animation, underline, css
- Docs: https://fancy-ui.rama.app/docs/components/line-hover-link
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/line-hover-link

## Import

```svelte
<script lang="ts">
  import { LineHoverLink } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { LineHoverLink } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"slide" \| "double" \| "grow" \| "strike" \| "fade" \| "pulse" \| "swap" \| "sweep" \| "bounce" \| "arc" \| "scribble" \| "ink"` | `"slide"` | The animation variant |
| `href` | `string` | `"#"` | Link href |
| `target` | `string` | — | Link target attribute |
| `rel` | `string` | — | Link rel attribute |
| `aria-label` | `string` | — | Accessible label |
| `sound` | `boolean` | `false` | Plays the press cue on activation, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Link text content |

## Examples

### All Variants

12 animated underline effects.

```svelte
<script lang="ts">
	import { LineHoverLink } from "fancy-ui-svelte";
	import type { LineHoverVariant } from "fancy-ui-svelte";

	const variants: { variant: LineHoverVariant; label: string }[] = [
		{ variant: "slide", label: "Slide" },
		{ variant: "double", label: "Double" },
		{ variant: "grow", label: "Grow" },
		{ variant: "strike", label: "Strike" },
		{ variant: "fade", label: "Fade" },
		{ variant: "pulse", label: "Pulse" },
		{ variant: "swap", label: "Swap" },
		{ variant: "sweep", label: "Sweep" },
		{ variant: "bounce", label: "Bounce" },
		{ variant: "arc", label: "Arc" },
		{ variant: "scribble", label: "Scribble" },
		{ variant: "ink", label: "Ink" },
	];
</script>

<div class="flex min-h-[280px] items-center justify-center p-12">
	<div class="grid grid-cols-3 gap-x-16 gap-y-10 md:grid-cols-4">
		{#each variants as { variant, label }}
			<div class="text-center">
				<LineHoverLink sound {variant} href="#" class="text-lg font-medium">
					{label}
				</LineHoverLink>
			</div>
		{/each}
	</div>
</div>
```

### Navigation Example

```svelte
<script lang="ts">
	import { LineHoverLink } from "fancy-ui-svelte";
</script>

<div class="flex min-h-[120px] items-center justify-center">
	<nav class="flex gap-8">
		<LineHoverLink sound variant="slide" href="#" class="text-muted-foreground">Home</LineHoverLink>
		<LineHoverLink sound variant="slide" href="#" class="text-muted-foreground">About</LineHoverLink
		>
		<LineHoverLink sound variant="slide" href="#" class="text-muted-foreground"
			>Services</LineHoverLink
		>
		<LineHoverLink sound variant="slide" href="#" class="text-muted-foreground"
			>Contact</LineHoverLink
		>
	</nav>
</div>
```