Columns of testimonials drifting in opposite directions at different speeds, with soft faded edges. Hover to pause.
“We rebuilt our landing page in an afternoon. Conversions went up 23% the following week.”
“Accessibility reports on every component saved our audit weeks of back and forth.”
“Clients notice the polish immediately. It's become part of how we pitch.”
“The motion feels considered, not gimmicky. Our designers stopped asking for custom animations.”
“It's the first UI kit where reduced motion was clearly thought about from day one.”
“Swapped our hero for theirs and bounce rate dropped by a third.”
“Copy, paste, ship. No package to babysit and the code is genuinely readable.”
“Our pricing page finally feels as premium as the product.”
“The playground made it easy to get the exact feel before touching any code.”
Customize
Usage
import { TestimonialWall } from "@/components/motionkit/testimonial-wall";
<TestimonialWall
testimonials={[
{ quote: "We rebuilt our landing page in an afternoon.", name: "Amara Okafor", role: "Founder, Lumen", rating: 5 },
{ quote: "The motion feels considered, not gimmicky.", name: "Tom Hale", role: "Design Lead, Northwind" },
// …at least two per column keeps the loop smooth
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Column scroll
Runs on its own
Social proof on landing and pricing pages, the bigger and busier the better: twenty quotes read as a crowd, not a list.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/testimonial-wall. It saves the file to components/motionkit and installs its dependencies.
Testimonial Wall is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the wall stops, the copies are removed and every card is shown at full height.
Pricing Section
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
Launch Hero
A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.
Bento Grid
A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.
“We rebuilt our landing page in an afternoon. Conversions went up 23% the following week.”
“Accessibility reports on every component saved our audit weeks of back and forth.”
“Clients notice the polish immediately. It's become part of how we pitch.”
“The motion feels considered, not gimmicky. Our designers stopped asking for custom animations.”
“It's the first UI kit where reduced motion was clearly thought about from day one.”
“Swapped our hero for theirs and bounce rate dropped by a third.”
“Copy, paste, ship. No package to babysit and the code is genuinely readable.”
“Our pricing page finally feels as premium as the product.”
“The playground made it easy to get the exact feel before touching any code.”
Customize
Usage
import { TestimonialWall } from "@/components/motionkit/testimonial-wall";
<TestimonialWall
testimonials={[
{ quote: "We rebuilt our landing page in an afternoon.", name: "Amara Okafor", role: "Founder, Lumen", rating: 5 },
{ quote: "The motion feels considered, not gimmicky.", name: "Tom Hale", role: "Design Lead, Northwind" },
// …at least two per column keeps the loop smooth
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Column scroll
Runs on its own
The live preview is free to explore. Plus unlocks the source for Testimonial Wall and every other premium component.