Sliced Hover
Uilora Sliced Hover — full-height sliced panels that expand and reveal on hover.
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 | A Uilora editorial — an immersive dive into the world of {title}. | Description template (use {title} placeholder). |
| buttonText | string | Explore Collection | Button text for expanded view. |
When to Use
Excellent for fashion editorial, lifestyle brands, and Next.js platforms that want a smooth 'Sliced' aesthetic. Use this gallery for an engaging experience where cards split and reveal their narrative with organic Framer Motion transitions.
Best Practices
Maintain consistent spacing within your design system by keeping the grid items centered. Follow React best practices by managed the layout-id for the 'Shared Element' transition. Optimize for performance by using efficient Tailwind col-spans.
Why This Component Matters
Sliced animations communicate digital excellence, playfulness, and craft. This Uilora-ready template helps you build an interface that feels responsive and alive, adding a unique architectural signature to your brand interaction.
FAQ
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.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.