Testimonial Wall, animated React component

An endless wall of reviews in columns that drift in opposite directions at slightly different speeds. Cards swell as they pass the middle and recede toward the edges, like reading through a lens. Hover a column and it eases to a stop while the others slow down; drag the wall to scrub it and let go to fling it. Cards can highlight a phrase or turn into a big-number card, and a Pause button stops everything.

Pro
Testimonials
Scroll
Hover

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Loved by teams who ship 4.9 from 2,140 reviews

We rebuilt our whole onboarding in an afternoon. The motion feels like it was designed in-house, not pulled from a kit.

Maya ChenDesign lead, Lumora

The springs are tuned better than anything I would have had time to tune myself.

Arjun MehtaStaff engineer, Quillstack

Design and engineering stopped arguing about motion. There is nothing left to argue about.

Amara NwosuPM, Cobalt Labs

Accessibility was already handled: focus rings, labels, reduced motion. That alone saved us a sprint.

Noah BennettEngineering manager, Driftline

Clients think I hired a motion designer. I did not tell them otherwise.

Hana KimFreelance designer

Our landing page finally feels alive. People screenshot it and send it to us.

Lena FischerHead of growth, Tidewater

3.4xfaster from design to production

Shipped faster than our old in-house library could even build.

Lucas MoreauFrontend lead, Glasshouse

Our investors asked who did our product design. It was this, and two evenings.

Elif YilmazFounder, Kiln

Copied a file, changed two props, done. That is the whole review.

Tomás RuizDeveloper, Oakhaven

Every component is one file with no surprises. I read it, I understand it, I ship it.

Daniel OkaforCTO, fieldnote

I am one person and my product looks like a team of twenty made it.

Priya NairIndie maker

0extra dependencies beyond React and framer-motion

Bundle stayed small because nothing pulls in a dependency you did not ask for.

Marcus HaleVP engineering, Ledgerly

+18%checkout conversion in week one

Checkout conversion went up the week we swapped in the new buttons.

Sofia MarquezFounder, Parcel & Pine

I prototype in it now. What I hand over is what ships, frame for frame.

Kenji WatanabeProduct designer, Orbitly

Hover a column to stop it. Drag the wall, or fling it.

Props

Prop	Type	Default	What it does
items	WallTestimonial[]	DEFAULT_WALL_TESTIMONIALS	The reviews: { name, role, quote, hue, mark?, metric?: { value, label } }. mark is a phrase in the quote to highlight; metric turns the card into a big-number card; hue colours the avatar and highlight.
height	number	560	Height of the wall, in px.
speed	number	30	Base drift in px per second. Each column drifts at its own multiple of this.
autoplay	boolean	true	The wall drifts by itself. When false it starts paused and the visitor can press Play. Reduced motion always starts it paused.
title	string	"Loved by teams who ship"	Heading above the wall.
className	string	—	Extra classes for the outer wrapper.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Testimonial Wall is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```
3
Add the component
Run this from your project root. It adds the component, the helpers it imports and its npm packages.
```
npx shadcn@latest add @nexus-labs/testimonial-wall
```
4
Check what was added
With a project made as in the Quick Start (a src/ folder), these files land in it:
components/
testimonial-wall/
index.ts
testimonial-wall.tsx
5
Copying by hand? Skip the registry
Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:
```
npm install framer-motion
```
Then show the source and create each file at the path it gives:

Use it in a page

Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

// src/app/page.tsx
import { TestimonialWall } from "@/components/testimonial-wall";

export default function Page() {
  return (
    <main>
      <TestimonialWall />
    </main>
  );
}

Pro
New
Origami Pricing
Pro
New
Usage Stack
Pro
New
Cloth Banner
Pro
New
Price Odometer

Testimonial Wall, animated React component

Play with it

Props

More testimonials