Clay Physics
Organic clay physics testimonial cards with morphing shapes.
Main Features of Clay Physics
How to Use Clay Physics in Next.js
Installation Guide for Clay Physics
Props
Customize the component with these 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). |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.