Testimonial Wall
Three columns of testimonials drifting in opposite directions forever — pause on hover.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
A seamless infinite loop (duplicated content, translate −50%), faded edges with a mask, and responsive columns. Ships with clearly-placeholder quotes.
Installation
$ npx shadcn@latest add https://guetix.com/r/testimonial-wall.json
Uses the shadcn CLI. It creates components/guetix/testimonial-wall.tsx and installs nothing else.
Usage
example.tsx
import { TestimonialWall } from "@/components/guetix/testimonial-wall";
export default function Example() {
return <TestimonialWall />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { quote; name; role; color? }[] | — | Testimonials. |
| speed | number | 38 | Seconds per loop. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Duplicates are aria-hidden; reduced motion shows a static wall.