Bynana UI

Usage

import Masonry from './Masonry';

const items = [
    {
      id: "1",
      img: "https://picsum.photos/id/1015/600/900?grayscale",
      url: "https://example.com/one",
      height: 400,
    },
    {
      id: "2",
      img: "https://picsum.photos/id/1011/600/750?grayscale",
      url: "https://example.com/two",
      height: 250,
    },
    {
      id: "3",
      img: "https://picsum.photos/id/1020/600/800?grayscale",
      url: "https://example.com/three",
      height: 600,
    },
    // ... more items
];

<Masonry
  items={items}
  ease="power3.out"
  duration={0.6}
  stagger={0.05}
  animateFrom="bottom"
  scaleOnHover={true}
  hoverScale={0.95}
  blurToFocus={true}
  colorShiftOnHover={false}
/>

Props

Prop	Type	Default	Description
`items`	`Item[]`	-	Array of items to display
`ease`	`string`	`'power3.out'`	GSAP easing function
`duration`	`number`	`0.6`	Animation duration
`stagger`	`number`	`0.05`	Stagger delay between items
`animateFrom`	`'bottom' \| 'top' \| 'left' \| 'right' \| 'center' \| 'random'`	`'bottom'`	Initial animation direction
`scaleOnHover`	`boolean`	`true`	Enable scale animation on hover
`hoverScale`	`number`	`0.95`	Scale factor on hover
`blurToFocus`	`boolean`	`true`	Blur to focus animation
`colorShiftOnHover`	`boolean`	`false`	Color shift overlay on hover