Testimonials wallPro
Testimonials in slowly scrolling columns that pause on hover, rows on phones.
What's inside
- Three scrolling columns
- Pause on hover and focus
- Star ratings
- Row marquee on phones
When to use
- Social proof on landing and pricing pages.
When not to use
- Fewer than four quotes: use a static grid.
Installation
Usage
Import it from @/components/blocks/testimonials-wall after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { TestimonialsWall } from "@/components/blocks/testimonials-wall";
<TestimonialsWall testimonials={[{ name: "Maya Chen", role: "Design lead", quote: "We shipped in a week.", rating: 5 }]} />Built fromMarqueePro
API reference
TestimonialsWall
Testimonials in vertical marquees (desktop) or one horizontal marquee (phones). Also the default export.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow / title | string | – | Heading. |
| testimonials | { name; role; quote; hue?; rating? }[] | – | At least 6 work best; split across three columns. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach the pause buttons |
Accessibility
- Columns pause on hover and focus and have pause buttons.
- Ratings are labelled as "5 out of 5 stars".
- Duplicated cards for the loop are hidden from screen readers.
Motion
- Columns scroll in opposite directions at different speeds.
Responsive behavior
- Three columns from 768px; a single horizontal strip below.
Performance
- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.
Notes for AI
- Use real names and roles with permission.
This page as Markdown, for assistants and coding agents:
/blocks/testimonials-wall/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt