API reference

Attributes

Attribute	Type	Default	Description
`direction`	string	`left`	`left` \| `right` \| `up` \| `down`
`speed`	number	`50`	Pixels per second
`behavior`	string	`loop`	`loop` \| `slide` \| `alternate`
`gap`	length	`2rem`	CSS length between repeats
`pause-on-hover`	boolean	—	Also pauses on `:focus-within`
`play-state`	string	`running`	`running` \| `paused`
`autofill`	boolean	`true`	Clone short content to fill the viewport (`false` to opt out)
`fade`	boolean	—	Apply an edge fade mask
`reduced-motion`	string	`respect`	`respect` \| `ignore`
`mode`	string	—	Surface themes: `ticker` \| `breaking-news` \| `code-block` \| `screen-saver` \| `credits` \| `dot-matrix`. Letter motion: `bounce` \| `wave` \| `march` \| `pulse` \| `ransom` \| `pop` \| `spin` \| `rainbow` \| `flip` \| `glitch` \| `leet` \| `blink` \| `chase` \| `invert` \| `decode`
`unit`	string	`letter`	`letter` \| `word` — granularity for the motion modes (animate each letter, or each whole word)

Letter-motion modes split the text into per-unit spans and animate each with a staggered delay. Set unit="word" to animate whole words instead of letters. They compose with scrolling and honor prefers-reduced-motion.

Methods & properties

Member	Description
`start()`	Play (sets `play-state="running"`)
`stop()`	Pause (sets `play-state="paused"`)
`toggle()`	Flip between running and paused
`refresh()`	Recompute clones / distance / duration after dynamic content changes
`direction`, `speed`, `behavior`, `playState`, `axis`	Readonly getters reflecting current configuration

Events

Event	Fired when
`marquee-start`	The marquee starts (on connect and on resume)
`marquee-pause`	The marquee is paused
`marquee-cycle`	Each animation loop iteration completes

All events bubble.

el.addEventListener('marquee-cycle', () => console.log('one loop completed'));

CSS custom properties

Property	Description
`--marquee-gap`	Space between repeats
`--marquee-fade-size`	Edge fade mask size (with `[fade]`)
`--marquee-bg` / `--marquee-fg`	Themed-variant background / foreground
`--marquee-label`	`breaking-news` label text
`--marquee-duration`, `--marquee-cycle-distance`	Computed by the component — do not set

Vanilla Breeze integration

Themed variants read Vanilla Breeze design tokens through layered var() fallbacks. A --marquee-* override always wins; absent that, the VB token is used; absent that, a built-in default applies — so non-VB pages render identically.

Mode	Vanilla Breeze tokens consumed
`ticker`	`--color-surface`, `--color-text`, `--font-mono`
`breaking-news`	`--color-error`, `--font-sans`
`code-block`	`--color-surface-sunken`, `--color-text`, `--font-mono`, `--radius-m`
`screen-saver`	`--color-background`, `--color-accent`, `--font-sans`
`credits`	`--font-serif`
`dot-matrix`	`--color-background`, `--color-accent`, `--font-mono`
`pop`	`--color-accent` (letters flash to it as they burst)

See it live on the home page — open the theme picker and switch themes.