Text Marquee

Animated text marquee component with vertical scrolling.

Design

Motion

Components

Interfaces

<script>
    import TextMarquee from '$registry/spelte/text-marquee.svelte';
</script>

{#snippet marqueeDesign()}
    <div class="text-2xl font-medium">Design</div>
{/snippet}

{#snippet marqueeMotion()}
    <div class="text-2xl font-medium">Motion</div>
{/snippet}

{#snippet marqueeComponents()}
    <div class="text-2xl font-medium">Components</div>
{/snippet}

{#snippet marqueeInterfaces()}
    <div class="text-2xl font-medium">Interfaces</div>
{/snippet}

<TextMarquee items={[marqueeDesign, marqueeMotion, marqueeComponents, marqueeInterfaces]} />

Installation

pnpm dlx shadcn-svelte@latest add https://spelte.dev/r/text-marquee.json

<script lang="ts">
	import { cn } from '$lib/utils';
	import type { Snippet } from 'svelte';

	interface Props {
		items: Snippet[];
		speed?: number;
		class?: string;
		prefix?: Snippet;
		height?: number;
	}

	let { items, speed = 1, class: className, prefix, height = 200 }: Props = $props();

	const count = $derived(items.length);
</script>


<div class={cn('flex relative', className)}>
	<div class="flex relative overflow-hidden flex-row gap-1 items-center w-min h-min">
		{#if prefix}
			<div class="whitespace-pre size-auto relative">
				{@render prefix()}
			</div>
		{/if}
		<div
			class="opacity-100 mask-[linear-gradient(rgba(0,0,0,0)_0%,rgb(0,0,0)_43.6902%,rgba(0,0,0,0)_100%)] relative w-auto overflow-hidden"
			style="height: {height}px"
		>
			<div class="relative h-full" style="--count: {count}; --speed: {speed}">
				{#each items as item, index}
					<div
						class="h-[40px] flex items-center"
						style="
							--index: {index};
							--origin: calc((var(--count) - var(--index)) * 100%);
							--destination: calc((var(--index) + 1) * -100%);
							--duration: calc(var(--speed) * {count}s);
							--delay: calc((var(--duration) / var(--count)) * var(--index) - var(--duration));
							translate: 0 var(--origin);
							animation: slide-vertical var(--duration) var(--delay) infinite linear;
						"
					>
						{@render item()}
					</div>
				{/each}
			</div>
		</div>
	</div>
</div>

Usage

<script>
	import TextMarquee from '$registry/spelte/text-marquee.svelte';
</script>
 
{#snippet launch()}
	<span>Launch</span>
{/snippet}
 
{#snippet scale()}
	<span>Scale</span>
{/snippet}
 
{#snippet convert()}
	<span>Convert</span>
{/snippet}
 
{@const items = [launch, scale, convert]}
 
<TextMarquee {items} />

Props

Prop	Type	Default	Description
`items`	`Snippet[]`	—	Array of snippets to scroll through
`speed`	`number`	`1`	Speed multiplier
`height`	`number`	`200`	Container height in pixels
`prefix`	`Snippet`	—	Optional prefix element
`class`	`string`	—	Additional CSS classes