Sliced Hover
Sliced hover gallery with split-screen effects.
Main Features of Sliced Hover
How to Use Sliced Hover in Next.js
Installation Guide for Sliced Hover
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{title: string, img: string}> | [{title: 'NATURE', img: '...'}, ...] | Array of items with title and image URL. |
backgroundColor | string | #ffffff | #ffffff Background color (hex, rgb, or hsl). |
descriptionTemplate | string | An immersive exploration into the depths of {title} aesthetics. | Description template (use {title} placeholder). |
buttonText | string | Explore Collection | Button text for expanded view. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does the split work?
The component uses localized mask coordinates to 'Slice' the card surface during hover, creating a high-fidelity physical reveal of the underlying feature detail.
QAre colors dynamic?
While the core theme is minimalist, each item's specific imagery and primary background color can be adjusted to fit your project's environmental theme.
QIs it mobile responsive?
Absolutely, the col-spans and slice logic scale for mobile, ensuring the 'Reveal' transition remains impactful on small screens.