Mosaic
Floating parallax mosaic gallery with soft minimal design.
Main Features of Mosaic
How to Use Mosaic in Next.js
Installation Guide for Mosaic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...array of image URLs] | Array of image source URLs. |
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. |
Related Components
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 in Modern UI Development
Mosaic layouts communicate digital elegance, sophistication, and attention to detail. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
Frequently Asked Questions
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.