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

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.

AcmeGlobexInitechHooliUmbrellaAperture
AcmeGlobexInitechHooliUmbrellaAperture
<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
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
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
🚀 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
🖱️ 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">