Animated Masonry

NewPremium

Masonry grid with staggered entrance animations and category filtering. Direction-aware motion presets.

layoutmasonrygridfilteranimateddirection-aware

Installation

Terminalbash

npx motioncraft add animated-masonry

Usage

animated-masonry.tsxtsx

import { AnimatedMasonry } from "@/components/layout/animated-masonry";

<AnimatedMasonry
  columns={3}
  items={[
    { id: 1, content: <div>Item 1</div>, category: "photos" },
    { id: 2, content: <div>Item 2</div>, category: "videos" },
  ]}
/>

Props

Prop	Type	Default	Description
items*	MasonryItem[]	—	Array of items with id, content, and optional category
columns	number	3	Number of columns
gap	number	16	Gap between items in pixels
categories	string[]	—	Category filter buttons
className	string	—	Additional CSS classes

Related Components

Infinite Grid

New

Perspective grid that scrolls infinitely with direction-aware coloring and edge fading.

Bento Grid

Apple-style bento grid layout with configurable spans and gap sizes.

Morphing Nav

New

Navigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.

Aurora Background

Animated aurora borealis gradient background with configurable colors and speed.