Line Shadow Text

svelte-animations/line-shadow-text

FreeBlock

A text component with an animated diagonal line shadow effect that moves across the text.

Install it

npx shadcn@latest add https://sv-animations.vercel.app/r/line-shadow-text.json

Source

./src/lib/components/magic/line-shadow-text/line-shadow-text.sveltesv-animations.vercel.app/r/line-shadow-text.json

1<script lang="ts">
2	import { motion } from "motion-sv";
3	import { cn } from "$UTILS$";
4 
5	type ElementType = "span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
6 
7	interface LineShadowTextProps {
8		content: string;
9		class?: string;
10		shadowColor?: string;
11		as?: ElementType;
12	}
13 
14	let {
15		content,
16		class: className,
17		shadowColor = "black",
18		as = "span",
19	}: LineShadowTextProps = $props();
20 
21	let MotionComponent = $derived(motion[as]);
22</script>
23 
24<MotionComponent
25	style={{ "--shadow-color": shadowColor }}
26	class={cn(
27		"relative z-0 inline-block whitespace-pre",
28		"after:absolute after:top-[0.04em] after:left-[0.04em] after:content-[attr(data-text)]",
29		"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]",
30		"after:-z-10 after:bg-size-[0.06em_0.06em] after:bg-clip-text after:text-transparent",
31		"after:animate-line-shadow",
32		className
33	)}
34	data-text={content}
35>
36	{content}
37</MotionComponent>

What it pulls in

npm packages

motion-sv

Files it writes

./src/lib/components/magic/line-shadow-text/line-shadow-text.svelte
./src/lib/components/magic/line-shadow-text/index.ts

More from Svelte Animations

All 66 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Beamanimated-beam	Svelte Animations	Blocks	Free	1 dep · 6 files
Animated Circular Progress Baranimated-circular-progress-bar	Svelte Animations	Blocks	Free	no deps · 2 files
Animated Gradient Textanimated-gradient-text	Svelte Animations	Blocks	Free	no deps · 2 files
Animated Grid Patternanimated-grid-pattern	Svelte Animations	Blocks	Free	1 dep · 2 files
Animated Listanimated-list	Svelte Animations	Blocks	Free	1 dep · 2 files
Animated Shiny Textanimated-shiny-text	Svelte Animations	Blocks	Free	no deps
Animated Theme Toggleranimated-theme-toggler	Svelte Animations	Blocks	Free	no deps · 2 files
Arc Timelinearc-timeline	Svelte Animations	Blocks	Free	no deps · 3 files