# Testimonial Cards (Moonarc)

Shows testimonial quotes in a staggered grid. Each card tilts gently toward the cursor, and the featured quote spans two columns with its words revealed one by one. Attribution with avatar and role.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/testimonial-cards` (license key required)
- Tier B · category section · trigger scroll, pointer
- Readout: `<TestimonialCards quotes={[…]} columns={3}>`
- Browser support: widely (every browser)
- Measured cost: 0 B JS of its own · uses Tilt + runtime + Reveal (with dependencies 3.5 kB raw; CSS 12.4 kB raw)
- Page: https://moonarc.dev/components/testimonial-cards/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quotes` | `{ quote, name, role?, avatar?, featured? }[]` | none | Quotes; a featured one spans two columns and splits its text. |
| `columns` | `2 | 3 | 4` | `3` | Columns on wide screens. |
| `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 gaps ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import TestimonialCards from '@/components/moonarc/pro/TestimonialCards.astro';
---
<TestimonialCards quotes={[
  { quote: 'Every byte on the page is accounted for.', name: 'A. Developer', role: 'Astro user', featured: true },
  { quote: 'Replaced three React islands with zero.', name: 'B. Builder' },
]} />
```

## Reduced motion

Cards fade in without stagger; no tilt; the featured quote appears at once.

## With ClientRouter

Inherits Reveal, Tilt and SplitText; nothing to wire.

## Craft

- Tilt is at most 5°, not 12°: a quote card that swings further reads as a toy.
- Only the featured quote splits. With more than one split per section, the stagger stops drawing the eye.
- Stagger 70 ms over cards, a little slower than the 40–60 ms of a feature grid, because each card is read on its own.

## Replaces

- Testimonial sections (Tailwind Plus)
- AnimatedTestimonials (Aceternity)

## Source

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