AnimationsNew
Masonry Gallery
Images of different heights packed in columns with no gaps. Each one sharpens out of a blur as it reaches the screen and grows into a large view on click.
Customize
hoverColor
borderColor
captionColor
Based on Masonry Grid (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id: string | number; src: string; title: string }[] | — | Gallery images with captions. |
| columns | number | 3 | Columns from 640 px up. Phones always get two. |
| gap | number | 16 | Space between images in pixels. |
| stagger | number | 0.06 | Delay between neighbouring images appearing in seconds. |
| expandable | boolean | true | A click grows the image into a large view. |
| hoverColor | string | "#ffffff" | Outline of a tile under the cursor. |
| borderColor | string | "rgba(255, 255, 255, 0.1)" | Thin border of the tiles and the large view. |
| captionColor | string | "#ffffff" | Colour of the image titles. They sit on a dark shade. |
| className | string | — | Extra classes. |
Dependencies
4 required packages
npm install motion lucide-react clsx tailwind-merge