<marquee-wc>
The <marquee> tag reborn for 2026 — accessible, constant-velocity,
themeable, and Vanilla Breeze aware.
Live Vanilla Breeze theme integration
Open the theme picker in the top-right corner and switch the mode,
brand theme, or accent. Every themed <marquee-wc> below — and this
entire page — re-themes instantly, because they read the same Vanilla Breeze design
tokens (--color-surface, --color-text,
--color-accent, --color-error, --font-mono,
--font-serif, …). No JavaScript wiring, no configuration.
mode="ticker" — reads --color-surface /
--font-mono
mode="breaking-news" — reads --color-error
--marquee-* overrides
required — but they still win if you set them.
mode="code-block" — reads the surface + mono tokens
Prefer a fixed look? Set a --marquee-* override (e.g.
--marquee-bg) and it always wins over the Vanilla Breeze token. Pages without
Vanilla Breeze fall back to the component's built-in defaults and render identically.
Features
- Zero dependencies — pure vanilla JavaScript, light DOM
- Constant velocity regardless of content length
- Four directions, three behaviors (loop / slide / alternate)
- Autofill clones short content to seamlessly fill the viewport
- Pauses when offscreen and when the tab is hidden
- Respects
prefers-reduced-motion - Accessible clones —
aria-hidden,inert, id-stripped -
Legacy-compatible API:
start()/stop()/toggle() - Built-in themes + full CSS custom property theming
- Vanilla Breeze design-token aware
Quick start
Install
npm
CDN
The component renders in the light DOM, so its stylesheet must be present on the page
(link the CSS, or import '@profpowell/marquee-wc/style.css' in a bundler).