# Testimonial Marquee (Moonarc)

Shows two rows of testimonial cards drifting in opposite directions, pausing while hovered so any quote can be read. Pure CSS; under reduced motion the rows become scrollable strips.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/testimonial-marquee` (license key required)
- Tier B · category section · trigger always, hover
- Readout: `<TestimonialMarquee quotes={[…]} rows={2}>`
- Browser support: widely (Chrome 120 · Firefox 53 · Safari 15.4)
- Measured cost: 0 B JS (CSS 8.5 kB raw)
- Page: https://moonarc.dev/components/testimonial-marquee/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quotes` | `{ quote, name, role? }[]` | none | Split evenly across the rows. |
| `duration` | `number` | `60` | Seconds per loop; the second row runs 8 s slower. |
| `rows` | `1 | 2` | `2` | One row, or two moving against each other. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Card padding and the row gap ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import TestimonialMarquee from '@/components/moonarc/pro/TestimonialMarquee.astro';
---
<TestimonialMarquee duration={60} quotes={[
  { quote: 'Zero islands, same motion.', name: 'A. Developer', role: 'Astro' },
  { quote: 'I can see what every component costs.', name: 'B. Builder' },
]} />
```

## Reduced motion

Rows stop and become scrollable strips.

## With ClientRouter

CSS-only; nothing to rebind.

## Craft

- The two rows differ by 8 s so cards never line up across rows twice in a session.
- Cards are a fixed 20 rem: a marquee of unequal widths reads as a bug.
- Hover pause is the whole reason a moving wall is acceptable for quotes; without it, use the card grid.

## Replaces

- Marquee testimonials (Magic UI)
- InfiniteMovingCards (Aceternity)

## Source

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