marquee

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { Snippet } from "svelte";
4 
5	type MarqueeProps = {
6		pauseOnHover?: boolean;
7		vertical?: boolean;
8		repeat?: number;
9		reverse?: boolean;
10		class?: string;
11		children?: Snippet;
12	};
13	let {
14		pauseOnHover = false,
15		vertical = false,
16		repeat = 4,
17		reverse = false,
18		class: _class = "",
19		children,
20	}: MarqueeProps = $props();
21</script>
22 
23<div
24	class={cn(
25		"group flex gap-(--gap) overflow-hidden p-2 [--duration:16s] [--gap:3rem]",
26		{
27			"flex-row": !vertical,
28			"flex-col": vertical,
29		},
30		_class
31	)}
32>
33	{#each { length: repeat } as _, i (i)}
34		<div
35			class={cn("flex shrink-0 justify-around gap-(--gap)", {
36				"animate-marquee flex-row": !vertical,
37				"animate-marquee-vertical flex-col": vertical,
38				"group-hover:paused": pauseOnHover,
39			})}
40			style="animation-direction:{reverse ? 'reverse' : 'normal'};
41      "
42		>
43			{@render children?.()}
44		</div>
45	{/each}
46</div>
47 
48<style>
49	@keyframes marquee {
50		0% {
51			transform: translateX(0%);
52		}
53		100% {
54			transform: translateX(-100%);
55		}
56	}
57 
58	@keyframes marquee-vertical {
59		0% {
60			transform: translateY(0%);
61		}
62		100% {
63			transform: translateY(-100%);
64		}
65	}
66 
67	.animate-marquee {
68		animation: marquee var(--duration) linear infinite;
69	}
70 
71	.animate-marquee-vertical {
72		animation: marquee-vertical var(--duration) linear infinite;
73	}
74</style>