ONONC

Masonry

A responsive multi-column masonry grid with a staggered reveal on scroll.

layoutmotionreveal
  • Space

    Nebula

  • Fire

    Ember

  • Ocean

    Tide

  • Star

    Nova

  • Sky

    Dusk

  • Forest

    Moss

  • Sun

    Flare

  • Ice

    Frost

  • Earth

    Clay

  • Bloom

    Iris

Customize

Layout

Columns3
Gap16px
Corner radius14px
Min column width200px

Columns drop below this width.

Motion

Reveal stagger0.06s
Hover scale1.03

Props

PropTypeDefaultDescription
itemsMasonryItem[]gradient setTiles ({ title?, subtitle?, height?, background? }).
columnsnumber3Target number of columns at full width.
gapnumber16Gap between tiles in pixels.
minColumnWidthnumber200Column count drops on narrow containers below this width per column.
radiusnumber14Tile corner radius in pixels.
hoverScalenumber1.03Scale applied to a tile on hover (1 disables).
staggernumber0.06Seconds of delay added per column position during the reveal.
labelstring"Masonry gallery"Accessible name for the grid.