Shattered Mosaic
Abstract broken mosaic gallery with shattered tile effects.
Main Features of Shattered Mosaic
How to Use Shattered Mosaic in Next.js
Installation Guide for Shattered Mosaic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{span: string, img: string}> | [{span: 'col-span-2 row-span-2', img: '...'}, ...] | Array of items with grid span classes and image URLs. |
backgroundColor | string | #0a0a0a | Background color (hex, rgb, or hsl). |
labelPrefix | string | Abstract | Prefix text for item labels. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Perfect for edgy brands, experimental studios, and Next.js platforms that want an abstract 'Shattered' aesthetic. Use this gallery to showcase project collections with a mix of asymmetrical spans and structural honesty.
Best Practices
Maintain consistent spacing within your design system by using it for aggressive brand storytelling. Follow React best practices by pairing it with bold, technical typography. Optimize for performance by using efficient image loading patterns.
Why This Component Matters in Modern UI Development
Shattered layouts communicate power, mystery, and digital confidence. This production-ready UI template helpsคุณ build an interface that feels energetic and alive, breaking the 'standard' minimalist web rules.
Frequently Asked Questions
QWhy 'Shattered'?
The grid uses non-uniform column spans and staggered offsets to simulate the organic imperfections found in physical mosaics and abstract art.
QCan I adjust the grid?
Yes, both the Tailwind col-spans and the primary background color can be customized to create 'Industrial' or 'Cyber' mosaic effects.
QIs it mobile responsive?
The shattered spans adapt dynamically for mobile, ensuring the abstract narrative remains impactful and structural on small screens.