# Marquee

> Infinite scrolling component for text, images, or cards.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Layout
- Tags: marquee, scrolling, animation, layout, infinite
- Docs: https://fancy-ui.rama.app/docs/components/marquee
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/marquee

## Import

```svelte
<script lang="ts">
  import { Marquee } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Marquee } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `reverse` | `boolean` | `false` | Reverse the scroll direction |
| `pauseOnHover` | `boolean` | `false` | Pause animation on hover |
| `vertical` | `boolean` | `false` | Scroll vertically instead of horizontally |
| `repeat` | `number` | `4` | Number of times to repeat children for seamless loop |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content to repeat and scroll |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Marquee, ReviewCard } from "fancy-ui-svelte";

	const reviews = [
		{
			name: "Jack",
			username: "@jack",
			body: "I've never seen anything like this before. It's amazing.",
			img: "https://avatar.vercel.sh/jack",
		},
		{
			name: "Jill",
			username: "@jill",
			body: "I don't know what to say. I'm speechless. This is amazing.",
			img: "https://avatar.vercel.sh/jill",
		},
		{
			name: "John",
			username: "@john",
			body: "I'm at a loss for words. This is amazing. I love it.",
			img: "https://avatar.vercel.sh/john",
		},
		{
			name: "Jane",
			username: "@jane",
			body: "I'm at a loss for words. This is amazing. I love it.",
			img: "https://avatar.vercel.sh/jane",
		},
		{
			name: "Jenny",
			username: "@jenny",
			body: "I'm at a loss for words. This is amazing.",
			img: "https://avatar.vercel.sh/jenny",
		},
		{
			name: "James",
			username: "@james",
			body: "I'm at a loss for words. This is amazing.",
			img: "https://avatar.vercel.sh/james",
		},
	];

	const firstRow = reviews.slice(0, 3);
	const secondRow = reviews.slice(3);
</script>

<div
	class="bg-background relative flex w-full flex-col items-center justify-center overflow-hidden rounded-lg border"
>
	<Marquee pauseOnHover class="[--duration:20s]">
		{#each firstRow as review}
			<ReviewCard {...review} />
		{/each}
	</Marquee>
	<Marquee reverse pauseOnHover class="[--duration:20s]">
		{#each secondRow as review}
			<ReviewCard {...review} />
		{/each}
	</Marquee>
	<div
		class="from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r"
	></div>
	<div
		class="from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l"
	></div>
</div>
```

### Vertical

Vertical scrolling direction.

```svelte
<script lang="ts">
	import { Marquee, ReviewCard } from "fancy-ui-svelte";

	const reviews = [
		{
			name: "Jack",
			username: "@jack",
			body: "I've never seen anything like this before.",
			img: "https://avatar.vercel.sh/jack",
		},
		{
			name: "Jill",
			username: "@jill",
			body: "I'm speechless. This is amazing.",
			img: "https://avatar.vercel.sh/jill",
		},
		{
			name: "John",
			username: "@john",
			body: "I'm at a loss for words.",
			img: "https://avatar.vercel.sh/john",
		},
	];
</script>

<div
	class="bg-background relative flex h-[500px] w-full flex-row items-center justify-center overflow-hidden rounded-lg border"
>
	<Marquee vertical pauseOnHover class="[--duration:20s]">
		{#each reviews as review}
			<ReviewCard {...review} />
		{/each}
	</Marquee>
	<Marquee vertical reverse pauseOnHover class="[--duration:20s]">
		{#each reviews as review}
			<ReviewCard {...review} />
		{/each}
	</Marquee>
	<div
		class="from-background pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b"
	></div>
	<div
		class="from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t"
	></div>
</div>
```