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>
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 |