Claymorphism
Soft clay-like portfolio with organic shapes and tactile design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #6c5ce7 | Primary brand color for buttons and accents. |
| backgroundColor | string | #e0e5ec | Background color (light mode neumorphic base). |
| shadowIntensity | number | 1 | Intensity of clay shadow effects (0.5-2). |
| borderRadius | string | 32px | Border radius for clay cards. |
| enableAnimations | boolean | true | Enable smooth animations and transitions. |
When to Use
Ideal for friendly startups, design tools, and Next.js platforms that want a tactile, 'soft' aesthetic. Use this template for a playful experience with organic, morphing clay shapes and deep neumorphic elevations.
Best Practices
Maintain consistent spacing within your design system by using it on soft, neutral background tones. Follow React best practices by pairing it with rounded, approachable typography. Optimize for performance by managed the complex box-shadow values.
Why This Component Matters
Claymorphism (tactile neumorphism) creates a sense of approachability and physical presence. This production-ready UI template helpsคุณ build an interface that feels friendly and deep, improving user affinity with your digital product.
FAQ
QHow are the clay cards made?
The component uses layered `box-shadow` (light/dark) and high `border-radius` to simulate the soft, squishy appearance of physical clay pieces.
QCan I use it for data?
Yes, the template integrates Recharts with a custom 'Clay' theme, making it perfect for friendly analytics dashboards.
QIs the color customizable?
Yes, the `backgroundColor` prop should be matched with your primary shadow colors to maintain the seamless 'elevated' neumorphic effect.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.