Clay Physics
Organic clay physics testimonial cards with morphing shapes.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
| backgroundColor | string | #E0E5EC | Background color of the component (hex, rgb, or hsl). |
| textColor | string | #475569 | Default text color (hex, rgb, or hsl). |
| title | string | Loved by Humans. | Main title text. |
| titleColor | string | #334155 | Color of the title text (hex, rgb, or hsl). |
| subtitle | string | Our users are our biggest fans. We don't just build software; we build relationships. | Subtitle text. |
| subtitleColor | string | #475569 | Color of the subtitle text (hex, rgb, or hsl). |
| buttonBgColor | string | #E0E5EC | Background color of buttons (hex, rgb, or hsl). |
| buttonShadowLight | string | rgba(255,255,255,0.5) | Light shadow color for buttons (hex, rgb, or hsl). |
| buttonShadowDark | string | rgb(163,177,198) | Dark shadow color for buttons (hex, rgb, or hsl). |
| buttonTextColor | string | #334155 | Text color of buttons (hex, rgb, or hsl). |
| buttonHoverTextColor | string | #3b82f6 | Text color of buttons on hover (hex, rgb, or hsl). |
| buttonActiveShadowLight | string | rgb(163,177,198) | Light shadow color for active buttons (hex, rgb, or hsl). |
| buttonActiveShadowDark | string | rgba(255,255,255,0.5) | Dark shadow color for active buttons (hex, rgb, or hsl). |
| cardBgColor | string | #E0E5EC | Background color of the testimonial cards (hex, rgb, or hsl). |
| cardShadowLight | string | rgba(255,255,255,0.5) | Light shadow color for cards (hex, rgb, or hsl). |
| cardShadowDark | string | rgb(163,177,198) | Dark shadow color for cards (hex, rgb, or hsl). |
| iconBgColor | string | #60a5fa | Background color of icons (hex, rgb, or hsl). |
| iconBorderColor | string | #E0E5EC | Border color of icons (hex, rgb, or hsl). |
| iconColor | string | #ffffff | Color of icons (hex, rgb, or hsl). |
| quoteColor | string | #334155 | Color of the quote text (hex, rgb, or hsl). |
| authorNameColor | string | #334155 | Color of the author name text (hex, rgb, or hsl). |
| authorCompanyColor | string | #64748b | Color of the author company text (hex, rgb, or hsl). |
When to Use
Excellent for friendly mobile apps, design portfolios, and Next.js startups that want a tactile, 'soft' aesthetic. Use this React component for a neumorphic testimonial section with organic, morphing card shapes.
Best Practices
Maintain consistent spacing within your design system by using it on light, monochromatic backgrounds. Follow React best practices by pairing it with clear, rounded typography. Optimize for performance by managed the shadow-blur radii.
Why This Component Matters
Neumorphism (Claymorphism) creates a sense of approachability and physical presence. This production-ready UI component helpsคุณ build an interface that feels tactile and friendly, improving user affinity with your brand.
FAQ
QHow are the morphing shapes made?
The cards use internal animation loops for their `border-radius`, creating a soft, shifting 'clay-like' appearance.
QIs the neumorphic effect customizable?
Yes, the `cardShadowLight` and `cardShadowDark` props allow you to fine-tune the depth and 'softness' of the elevation.
QCan I use it on dark backgrounds?
While optimized for light mode (`#E0E5EC`), the colors can be adjusted to create a similar tactile effect on dark gray backgrounds.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.