Masonry

Responsive masonry layout with animated reflow + gaps optimization.

Default

Use the replay button to run the entrance again. Every prop is wired to the controls underneath.

Ease

Animate From

Duration0.6s

Stagger0.05s

Scale on HoverBlur to FocusColor Shift on Hover

Prop	Type	Default	Description
`items`	`{ id: string; img: string; url: string; height: number }[]`	`required`	Array of items to display in the masonry layout. Each item should have id, img, url, and height properties.
`ease`	`string`	`'power3.out'`	GSAP easing function for animations.
`duration`	`number`	`0.6`	Duration of the transition animations in seconds.
`stagger`	`number`	`0.05`	Delay between each item's animation in seconds.
`animateFrom`	`string`	`'bottom'`	Direction from which items animate in. Options: 'top', 'bottom', 'left', 'right', 'center', 'random'.
`scaleOnHover`	`boolean`	`true`	Whether items should scale on hover.
`hoverScale`	`number`	`0.95`	Scale value when hovering over items (only applies if scaleOnHover is true).
`blurToFocus`	`boolean`	`true`	Whether items should animate from blurred to focused on initial load.
`colorShiftOnHover`	`boolean`	`false`	Whether to show a color overlay effect on hover.

Keyboard shortcuts and ARIA behavior.

Items are clickable divs without focus or alt text, so they work for pointer users only. Add your own link semantics if the images matter for navigation.