A fast, lightweight Svelte marquee component

svelte-fast-marquee scrolls anything you put inside it — logos, text, cards — with a pure CSS animation. If you used react-fast-marquee, this is the Svelte version.

npm install svelte-fast-marquee

Quick start GitHub

Quick start

Install the package, import the Marquee component and wrap any content with it. No configuration, no global CSS, no browser APIs — it works in plain Svelte and in SvelteKit with SSR out of the box.

<script>
  import Marquee from 'svelte-fast-marquee';
</script>

<Marquee>This text scrolls forever 🚀</Marquee>

Examples

Live demos rendered with the real component. Copy any snippet and paste it into your Svelte or SvelteKit project.

Logo wall

The classic "trusted by" strip. pauseOnHover lets visitors stop the loop to look at a logo, and gap accepts any CSS length.

<script>
  import Marquee from 'svelte-fast-marquee';
</script>

<Marquee speed={40} pauseOnHover gap="3rem">
  <img src="/logos/acme.svg" alt="Acme" height="40" />
  <img src="/logos/globex.svg" alt="Globex" height="40" />
  <img src="/logos/initech.svg" alt="Initech" height="40" />
  <img src="/logos/hooli.svg" alt="Hooli" height="40" />
  <img src="/logos/umbrella.svg" alt="Umbrella" height="40" />
  <img src="/logos/aperture.svg" alt="Aperture" height="40" />
</Marquee>

Auto-filled short rows

Turn on autoFill when a short set of children would leave empty space in the container. The marquee repeats the children enough times to fill the row, which is useful for compact logo rows or ticker items. Without autoFill, the default behavior is unchanged.

Logo 1 Logo 2 Logo 3

<Marquee autoFill pauseOnHover gap="2rem">
  <span>Logo 1</span>
  <span>Logo 2</span>
  <span>Logo 3</span>
</Marquee>

News ticker

Scroll to the right and fade the edges out. Setting gradientColor is what enables the gradient — match it to your background color.

Breaking: Svelte marquees now scroll at 60fps with zero JavaScript per frameMarkets: bundle sizes drop sharply as teams switch to 1.1 kB componentsWeather: smooth scrolling expected across all modern browsers

<Marquee direction="right" gradientColor="white" gradientWidth="15%">
  <span class="headline">Breaking: Svelte marquees now scroll at 60fps…</span>
  <span class="headline">Markets: bundle sizes drop sharply…</span>
  <span class="headline">Weather: smooth scrolling expected…</span>
</Marquee>

Play / pause from outside

The play prop is reactive: bind it to any state in your app to start and stop the marquee from a button, a scroll observer, or anything else.

🚀 Controlled from outside 🎛️ Bind the play prop to any state

<script>
  import Marquee from 'svelte-fast-marquee';

  let play = true;
</script>

<button on:click={() => (play = !play)}>
  {play ? 'Pause' : 'Play'}
</button>

<Marquee {play} speed={80} gap="2rem">
  <span>🚀 Controlled from outside</span>
  <span>🎛️ Bind the play prop to any state</span>
</Marquee>

Pause on click

With pauseOnClick, the marquee stops while the pointer is held down and resumes when released. Try it on the demo below.

🖱️ Click and hold me to pause 👆 Release to resume scrolling

<Marquee pauseOnClick speed={60} gap="2rem">
  <span>🖱️ Click and hold me to pause</span>
  <span>👆 Release to resume scrolling</span>
</Marquee>

Props

The complete API of the <Marquee> component. Everything else is up to your markup and CSS — the component just scrolls whatever you put in its slot.

Prop	Type	Default	Description
`play`	`boolean`	`true`	Whether the animation is running or paused.
`speed`	`number`	`100`	Scroll speed in pixels per second.
`direction`	`"left" \| "right"`	`"left"`	Direction the content scrolls in.
`pauseOnHover`	`boolean`	`false`	Pause the marquee while it is hovered.
`pauseOnClick`	`boolean`	`false`	Pause the marquee while the pointer is held down.
`autoFill`	`boolean`	`false`	Repeat the children enough times to fill empty container space. Defaults to the normal single set of children when unset.
`gap`	`string`	`"0px"`	Space between elements — any CSS length value.
`gradientColor`	`string`	`""`	Color of the fade at the edges. Setting it is what enables the gradient.
`gradientWidth`	`string`	`""`	Width of the edge gradient (defaults to 10%).
`class`	`string`	`""`	CSS class applied to the marquee container.
`style`	`string`	`""`	Inline styles applied to the marquee container.

Coming from react-fast-marquee?

svelte-fast-marquee is inspired by react-fast-marquee and keeps an almost identical API, so most usages port over by changing the import. The props available here are play, speed, direction, pauseOnHover, pauseOnClick, gap, autoFill, gradientColor, gradientWidth, class and style.

The one difference to watch for: there is no gradient boolean here — the edge gradient turns on when you set gradientColor.

- import Marquee from 'react-fast-marquee';
+ import Marquee from 'svelte-fast-marquee';

- <Marquee gradient gradientColor="white">
+ <Marquee gradientColor="white">