Testimonials Card
Testimonials Card is an image interaction in the UI HUB image interactions collection. A 3D testimonial card stack: the active portrait pops forward out of a fanned stack of image cards (rotateZ offsets, z depth, scale) while its name and quote animate in; direction-aware enter/exit slides the card in from the off-screen side.
The component is driven by 7 documented props (items, className, width, showNavigation, showCounter, autoPlay and 1 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Direction-aware AnimatePresence enter/exit; Fanned stack transforms (rotateZ/z/scale per offset); Autoplay interval cleared on unmount.
Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Testimonials Card?
A 3D stacked portrait testimonial slider with cross-faded quote, counter and optional autoplay.
Testimonials Card at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React, Framer Motion and Lucide React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 7
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Testimonials Card works
A 3D testimonial card stack: the active portrait pops forward out of a fanned stack of image cards (rotateZ offsets, z depth, scale) while its name and quote animate in; direction-aware enter/exit slides the card in from the off-screen side. A counter shows position, arrow buttons navigate with disabled ends, and optional autoplay advances on an interval cleared on unmount. Collapses to a single column under md.
Technical information for Testimonials Card
| Category | Image Interactions |
|---|---|
| Libraries | React, Framer Motion and Lucide React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| State change | stacked portrait cards with the first active to active portrait pulled forward and its testimonial text cross-faded in |
| Props | 7 configurable |
| Usage example | Included on this page |
What Testimonials Card requires
- Direction-aware AnimatePresence enter/exit
- Fanned stack transforms (rotateZ/z/scale per offset)
- Autoplay interval cleared on unmount
- ARIA labels on nav buttons
- Responsive single-column layout under md
How to use Testimonials Card
- Install the dependencies: npm install framer-motion and npm install lucide-react.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <TestimonialsCard /> in your page using that import path.
- Pass any of the 7 documented props to change colours, density, speed or behaviour.
Testimonials Card questions
What is Testimonials Card?
A 3D stacked portrait testimonial slider with cross-faded quote, counter and optional autoplay.
How does Testimonials Card work?
A 3D testimonial card stack: the active portrait pops forward out of a fanned stack of image cards (rotateZ offsets, z depth, scale) while its name and quote animate in; direction-aware enter/exit slides the card in from the off-screen side. A counter shows position, arrow buttons navigate with disabled ends, and optional autoplay advances on an interval cleared on unmount. Collapses to a single column under md.
Which category does Testimonials Card belong to?
Testimonials Card is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the items prop do in Testimonials Card?
Testimonials as { id, title, description, image }. It defaults to DEFAULT_TESTIMONIALS.
What does the className prop do in Testimonials Card?
Extra classes for the outer container. It defaults to undefined.
Is Testimonials Card free to use?
Testimonials Card is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Testimonials Card use?
Testimonials Card uses React, Framer Motion and Lucide React and is styled with Tailwind CSS.
What does Testimonials Card need to run?
Testimonials Card needs Direction-aware AnimatePresence enter/exit, Fanned stack transforms (rotateZ/z/scale per offset), Autoplay interval cleared on unmount and ARIA labels on nav buttons.