# Ticker Bands (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/ticker-bands` (license key required)
- Tier B · category section · trigger always, hover
- Readout: `<TickerBands items={[…]} />`
- Browser support: widely (every browser)
- Measured cost: 0 B JS (CSS 9.9 kB raw)
- Page: https://moonarc.dev/components/ticker-bands/

## 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. |

## Usage

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

## Reduced motion

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

## With ClientRouter

Inherits Marquee; nothing of its own to rebind.

## Craft

- 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)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/ticker-bands` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: marquee.