Clay Stack
Draggable claymation-style testimonial cards with swipe gestures.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| cards | Array<{id: number, text: string, author: string, color: string}> | [{id: 1, text: 'Uilora changed how our team ships...', author: 'Mike T.', color: '#fef08a'}, ...] | Array of card objects with id, text, author, and background color. |
| backgroundColor | string | #f0f0f0 | Background color (hex, rgb, or hsl). |
When to Use
Ideal for product landing pages, SaaS platforms, and Uilora-powered apps that want a tactile, physical testimonial experience. The draggable deck mechanic makes passive content feel interactive and memorable.
Best Practices
Keep the card stack to 3–5 items. Use distinct pastel colors per card so each testimonial feels like its own visual identity. Pair with bold Uilora typography for maximum contrast.
Why This Component Matters
Physical drag interactions create a sense of weight and authenticity that static quotes can't match. Users spend more time engaging with draggable content, increasing the credibility signal of each testimonial.
FAQ
QHow does the drag work?
Each card uses Framer Motion's drag constraints and spring physics. Dragging past a threshold fans the card out and dismisses it, revealing the next one underneath.
QCan I use images in the cards?
The cards prop accepts any content — extend the card shape to include an optional image field and render it inside the card body.
QIs it mobile responsive?
Yes. The stack scales to fit the container width and touch drag works natively on mobile via Framer Motion's pointer events.