Text & Typography Fancy Stable
LineShadowText
Text with animated diagonal line shadow pattern that scrolls continuously
Preview
svelte
<script lang="ts">
import { LineShadowText } from 'fancy-ui-svelte';
</script>
<LineShadowText text="Shadow" />Installation
pnpm add fancy-ui-svelte
import { LineShadowText } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { LineShadowText } from 'fancy-ui-svelte';
</script>
<LineShadowText />Examples
Basic Usage
svelte
<script lang="ts">
import { LineShadowText } from "$lib/fancy-ui/line-shadow-text";
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 "$lib/fancy-ui/line-shadow-text";
</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 "$lib/fancy-ui/line-shadow-text";
</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>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text * | 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 |
Links
Related components
Bl
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
Text & Typography Stable
Bo
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
Text & Typography Stable
Co
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions
Text & Typography Stable