Z-Stack
Z-stack deck gallery with layered cards.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...array of image URLs] | Array of image source URLs. |
| backgroundColor | string | #e0e5ec | Background color (hex, rgb, or hsl). |
| title | string | The Stack. | Main title text. |
| description | string | Hover to expand the collection. A playful take on depth. | Description text. |
| cardCount | number | 5 | Number of cards to display in the stack. |
| shadowColor | string | #bebebe | Shadow color for neumorphic effect (hex, rgb, or hsl). |
When to Use
Ideal for wellness apps, lifestyle brands, and Next.js platforms that want a soft 'Clay' aesthetic. Use this gallery for an engaging 'Deck' experience where images feel 'Physical' and 'Stacked' like real paper cards.
Best Practices
Maintain consistent spacing within your design system by adhering to the soft neumorphic shadows. Follow React best practices by using pure Tailwind for the layout structure. Optimize for performance by using systematic typography scales.
Why This Component Matters
Neumorphic 'Clay' aesthetics communicate technical reliability, clarity, and timeless craft. This production-ready UI template helps you build an interface that feels organized and professional, reflecting a brand identity rooted in design purity.
FAQ
QWhat is 'Clay Case'?
The component uses localized CSS box-shadows and subtle inner glows to simulate the soft, matte surfaces found in high-fidelity 3D clay renders.
QHow does it expand?
The deck uses localized mouse coordinates to fan out the cards during hover, creating a high-fidelity 'physical' expansion of the underlying project detail.
QIs it mobile responsive?
The stack count and typographic scales adapt for mobile, ensuring the 'Deck' feel remains consistent on high-density mobile screens.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.