Marquee

A custom marquee component that smoothly scrolls its child elements.

Basic Demo

To explore more demos, click here.

Automatic Cloning of Child Nodes
Seamlessly duplicates content to ensure a continuous marquee without visual gaps.
Horizontal and Vertical Modes
Works in both directions with the same API — no extra configuration needed.
Flexible Speed Control
Supports dynamic speed updates and smooth runtime adjustments.
Custom Speed & Gap With CSS Units
Both speed and gap accept any CSS length unit (px, rem, vw, etc.), with gap supporting only zero or positive values.
Playback Control API
Programmatically play, pause, and restart the marquee.
Pause on Hover
Optional hover-based pausing built in.
Default Styling Included
Ships with minimal required CSS (or inline styles), so the marquee works out-of-the-box without custom styling.

To ensure smooth and predictable marquee behavior:

Use either plain text or a group of elements as children — the component is optimized for both.
Child elements should preferably use inline-block or block display values for correct width calculation.
The gap property should always be 0 or a positive value. Negative values are not supported.
When using complex layouts inside the marquee, avoid margin collapsing and ensure elements have measurable width/height.
For vertical marquee, define an explicit container height.
Avoid using inline styles inside marquee children.

Marquee is easy to initialize:

<div id="marquee">Breaking News🔥</div>

import { Marquee } from "vevet";

const marquee = new Marquee({
  container: document.getElementById("marquee")
});

Stop marquee:

marquee.updateProps({
  enabled: false
});

Play marquee:

marquee.updateProps({
  enabled: true
});

Manual rendering:

marquee.render(2); // moves marquee two pixels forward

Destroy the marquee

marquee.destroy();