Ticker Bands

Two tilted bands that cross the page, each a marquee of the same few words running the other way: one in the ink tone, one in a colour block, the words alternating between the body face and the emphasis face with a spark between them. A divider with a voice of its own. The bands are decoration, hidden from assistive technology with no tab stop; label gives the words to a screen reader once. They pause under a pointer and stand still under reduced motion (Marquee). Zero JavaScript of its own.

Sample services: Social media, Photoshoots, Short video, Design sets, Ads, Live selling

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

CSS 9.9 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

every browser.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/ticker-bands

src/pages/index.astro

---
import TickerBands from '@/components/moonarc/pro/TickerBands.astro';
---
<TickerBands items={['Social media', 'Photoshoots', 'Short video', 'Design', 'Ads', 'Live selling']} />

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: marquee.

Props

Prop	Type	Default	Description
`items`	`string[]`	none	The words, in order; every second one is set in the emphasis face (--ma-font-em, italic).
`bands`	`{ paint?: 1 \| 2 \| 3 \| 4 \| 5 \| 'ink'; tilt?: number; reverse?: boolean }[]`	`[{ paint: 'ink', tilt: 3, reverse: true }, { paint: 1, tilt: -2.5 }]`	Up to two bands, the first drawn under the second: what each paints (a block or the ink tone), its tilt in degrees (doubled on a phone) and its direction.
`duration`	`number`	`45`	Seconds for one pass.
`label`	`string`	none	When set, the words are also given once to a screen reader, under this name.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-tickerbands.ma-tickerbands__band.ma-tickerbands__item.ma-tickerbands__spark

Slots

none

Reduced motion

The bands stand still, tilted, with their words in place.

With `ClientRouter`

Inherits Marquee; nothing of its own to rebind.

Why it is built this way

Two bands at opposite tilts make a cross, and running in opposite directions they never line up into one stripe.
The tilt doubles on a phone: at 2 degrees across a narrow screen one band hides behind the other.
The bands run 3rem past each edge so a tilted end never shows its corner, and the box clips them sideways only.
Alternate words change face, not colour: the band stays one colour pair, so its contrast is the block's own.

Replaces: Crossing marquee ribbons (Framer agency templates). See the migration table.

Marquee

Ticker

Infinite scrolling strip for logos, quotes or tags in any direction.

every browseralwayshover

Logo Wall

Pro

A "trusted by" section: a heading, a strip of greyscale logos drifting past that colour up on hover, and optionally the same logos as a hairline grid revealed with a stagger.

every browseralwaysscroll

Testimonial Marquee

Pro

Shows two rows of testimonial cards drifting in opposite directions, pausing while hovered so any quote can be read.