## Testimonial Columns (S—479)

A wall of quotes in three columns drifting at different speeds, the middle against the others, fading at the edges.

- URL: https://sundaeui.dev/components/testimonial-columns
- Category: Page sections · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/testimonial-columns.json`
- Tags: marquee, section, animated, social-proof, react, testimonials, landing-page

Quotes are dealt into three columns that scroll endlessly at slightly different speeds, with the middle column moving the other way, so the wall never looks like a single conveyor belt. The top and bottom edges fade into the page, and hovering a column pauses it so a quote can be read.
Each card has the quote, a name and a role, and an initial-based avatar tinted from a soft palette, so the section looks finished before you have headshots. Two columns on tablets, one on phones.
The moving wall is decoration: the same quotes are rendered once as a plain list for screen readers. Light and dark (.dark), one CSS file, and under prefers-reduced-motion the columns stand still.

### Usage

```tsx
import { TestimonialColumns } from '@/components/sundae/testimonial-columns'

<TestimonialColumns
  title="Teams stopped dreading Monday."
  items={[{ quote: 'We cancelled three spreadsheets in the first week.', name: 'Maya Chen', role: 'Head of Finance, Fieldnote' }]}
/>
```

### Props

- `title` (`string`, required): Section heading.
- `items` (`{ quote: string; name: string; role: string }[]`, required): Six to twelve quotes fill the wall well.
- `eyebrow` (`string`, default `'What people say'`): Label above the heading.
- `intro` (`string`): Supporting paragraph.
- `duration` (`number`, default `48`): Seconds for the slowest column to loop.

### Accessibility

- The animated wall is aria-hidden; every quote is also in a visually hidden list.
- Hovering a column pauses it; reduced motion stops all movement.