Abstract Sliced
Abstract sliced masonry grid with split-screen effects.
Main Features of Abstract Sliced
How to Use Abstract Sliced in Next.js
Installation Guide for Abstract Sliced
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...12 image URLs] | Array of image URLs. |
content | Array<{type: 'img'|'text', src?: string, title?: string, text?: string, span?: string}> | Array of content items (images or text cards). If not provided, default content is generated from images. | |
backgroundColor | string | #171717 | Background color (hex, rgb, or hsl). |
overlayColor | string | #dc2626 | Overlay color for hover effects (hex, rgb, or hsl). |
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?
Absolutely, you can adjust both the `backgroundColor` and the primary `overlayColor` (default red) to match your brand's specific high-intensity palette.
QIs it mobile responsive?
The grid spans and organic offsets adapt for mobile, ensuring the 'Reveal' transition remains impactful and structural on small screens.