Clay Physics
Organic clay physics stats section 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 |
|---|---|---|---|
stats | Array<{icon: LucideIcon, value: number, label: string, suffix?: string, iconColor?: string}> | [] | Array of stat items with icon, value, label, optional suffix, and iconColor. |
backgroundColor | string | #e0e5ec | Background color (hex, rgb, or hsl). |
cardBgColor | string | #e0e5ec | Card background color. |
cardShadowLight | string | rgba(255,255,255,0.5) | Card light shadow color for neumorphic effect. |
cardShadowDark | string | rgb(163,177,198) | Card dark shadow color for neumorphic effect. |
iconBgColor | string | #e0e5ec | Icon background color. |
iconShadowLight | string | #ffffff | Icon light shadow color. |
iconShadowDark | string | #bebebe | Icon dark shadow color. |
valueColor | string | #475569 | Value text color. |
labelColor | string | #64748b | Label text color. |
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 stats 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.