# LineShadowText

> Text with animated diagonal line shadow pattern that scrolls continuously.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, animation, shadow, pattern, typography, decoration
- Docs: https://fancy-ui.rama.app/docs/components/line-shadow-text
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/line-shadow-text

## Import

```svelte
<script lang="ts">
  import { LineShadowText } 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 { LineShadowText } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` | — | Text content to display |
| `shadowColor` | `string` | `"black"` | Color of the diagonal line shadow |
| `as` | `"span" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "div"` | `"span"` | HTML element to render as |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { LineShadowText } from "fancy-ui-svelte";
	import { createThemeState } from "$lib/stores/theme.svelte";

	const themeState = createThemeState();
	const shadowColor = $derived(themeState.isDark ? "white" : "black");
</script>

<p class="text-6xl leading-none font-bold">
	Shadow <LineShadowText text="Text" class="italic" {shadowColor} />
</p>
```

### Custom Shadow Color

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

<div class="flex flex-col items-center gap-6">
	<p class="text-5xl leading-none font-bold">
		Red <LineShadowText text="Shadow" shadowColor="red" />
	</p>
	<p class="text-5xl leading-none font-bold">
		Blue <LineShadowText text="Shadow" shadowColor="royalblue" />
	</p>
	<p class="text-5xl leading-none font-bold">
		Emerald <LineShadowText text="Shadow" shadowColor="oklch(0.765 0.177 163.22)" />
	</p>
</div>
```

### Dark Background

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

<div class="rounded-lg bg-zinc-950 p-8">
	<p class="text-6xl leading-none font-bold text-white">
		Light on <LineShadowText text="Dark" shadowColor="white" />
	</p>
</div>
```