Staggered Masonry

Staggered Masonry

PreviewUsageInstallation

Staggered Reveal

Scroll into view to trigger animation

Replay Animation

View Project

View Project

View Project

View Project

View Project

View Project

View Project

View Project

View Project

Installation

npx kinetic-ui-cli@latest add staggered-masonry

Anatomy

This component uses Framer Motion's useInView hook attached to the parent container. Once the container scrolls into view, it triggers a visible variant state.

Using staggerChildren: 0.1 on the parent container's variant, we automatically stagger the entrance animation of each grid item.

Each individual grid item actually consists of two nested animations:

1. The Wrapper: Slides up and reveals itself using clipPath: inset().
2. The Inner Image: Scales down from 1.2 to 1 slightly slower than the wrapper, creating an elegant parallax entrance effect.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { StaggeredMasonry } from "@/components/creative/staggered-masonry";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { StaggeredMasonry } from "@/components/creative/staggered-masonry";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <StaggeredMasonry
        items{/* value */}
        columns{10}
      />
    </div>
  );
}