# Testimonial Wall

> Columns of testimonials drifting in opposite directions at different speeds, with soft faded edges. Hover to pause.

Category: Sections · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/testimonial-wall

## When to use it

Social proof on landing and pricing pages, the bigger and busier the better: twenty quotes read as a crowd, not a list.

## How it works

Testimonials are dealt out across the columns like cards, so each one gets a mix. Every column holds two copies of its cards and slides by exactly one copy's height with a CSS animation, which loops seamlessly. Columns alternate direction and differ slightly in pace, and a mask fades the top and bottom edges. Hovering or tabbing into a column pauses it. The duplicate copy is inert, so keyboard and screen reader users only meet each card once. With reduced motion, CSS stops the wall and shows every card.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/testimonial-wall` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `testimonials` | `Testimonial[]` |  | Each quote, name, role, optional avatar and rating. |
| `columns` | `2 \| 3 \| 4` | `3` | Columns on wide screens. Phones show one, tablets two. |
| `speed` | `number` | `30` | Pixels per second for the slowest column. |
| `height` | `string` | `"36rem"` | Height of the wall as a CSS length. |
| `accent` | `string` | `"#E4DCCF"` | Colour of the stars. |

## Accessibility

- **Keyboard: Pass.** Tabbing into a column pauses it; the duplicate copies used for the loop are inert, so focus never lands twice.
- **Screen readers: Pass.** Each testimonial is a figure with its quote, name and role read once; star ratings read as "4 out of 5 stars".
- **Reduced motion: Pass.** With reduced motion on, the wall stops, the copies are removed and every card is shown at full height.
- **Colour contrast: Pass.** Quotes measure 13.4:1 and names 15.5:1 on the card.