Showcase

Marquee

A scrolling content loop that accelerates, reverses, or syncs with scroll position.

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add marquee

Import the component

Import the component into your Svelte file:

import { Marquee } from "$lib/motion-core";

import { Marquee } from "$lib/motion-core";

Usage

Motion・

Craft・

Ecosystem・

Initiative・

Transition・

Interaction・

Experience・

Playground・

Journey・

Motion・

Craft・

Ecosystem・

Initiative・

Transition・

Interaction・

Experience・

Playground・

Journey・

<script lang="ts">
	import { Marquee } from "motion-core";

	const texts = [
		"Motion・",
		"Craft・",
		"Ecosystem・",
		"Initiative・",
		"Transition・",
		"Interaction・",
		"Experience・",
		"Playground・",
		"Journey・",
	];
</script>

<div
	class="flex h-full min-h-96 w-full flex-col items-center justify-center gap-4"
>
	<Marquee
		class="h-fit"
		gap={0}
		duration={20}
		velocity={1}
		scrollElement="#docs-content-container"
	>
		{#each texts as text (text)}
			<div class="flex items-center text-4xl font-medium">
				{text}
			</div>
		{/each}
	</Marquee>

	<Marquee
		class="h-fit"
		gap={0}
		duration={20}
		velocity={1}
		reversed
		scrollElement="#docs-content-container"
	>
		{#each texts as text (text)}
			<div class="flex items-center text-4xl font-medium">
				{text}
			</div>
		{/each}
	</Marquee>
</div>

Props

Marquee

Prop	Type	Default
`children`	`Snippet`	`—`
`duration`	`number`	`5`
`velocity`	`number`	`0.5`
`repeat`	`number`	`3`
`class`	`string`	`''`
`gap`	`number`	`32`
`reversed`	`boolean`	`false`
`scrollElement`	`stringHTMLElementnull`	`undefined`