Mosaic
Floating parallax mosaic gallery with soft minimal design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...array of 15 image URLs] | Array of image source URLs (15 recommended for 5 per column). |
| backgroundColor | string | #FDFBF7 | Background color (hex, rgb, or hsl). |
| viewText | string | View | Text displayed on hover overlay. |
| scrollSpeed1 | number | -200 | Scroll speed for first column (negative = up, positive = down). |
| scrollSpeed2 | number | 150 | Scroll speed for second column. |
| scrollSpeed3 | number | -100 | Scroll speed for third column. |
When to Use
Perfect for fashion editorials, interior design portfolios, and travel blogs that want a light, airy 'Mosaic' aesthetic. Use this gallery to showcase a collection of images with a sense of depth and organic movement.
Best Practices
Maintain consistent spacing within your design system by keeping the column gaps uniform. Follow React best practices by pairing this with high-fidelity, professional photography. Optimize for performance by using efficient image loading patterns.
Why This Component Matters
Mosaic layouts communicate digital elegance, sophistication, and attention to detail. This production-ready UI template helps you build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
FAQ
QHow does the parallax work?
The gallery uses localized scroll-driven animations with varying speeds for each column, creating a high-fidelity 'depth' effect as the user navigates the page.
QCan I adjust the speeds?
Absolutely, both the direction and intensity of the column movement (scrollSpeed1, 2, 3) are fully configurable to match your scroll intensity.
QIs it mobile responsive?
Yes, the multi-column mosaic adapts its spans dynamically for mobile, ensuring the organic flow remains impactful and readable on small screens.