Masonry Grid with Scroll Animation

Cards 272

About

Masonry Grid with Scroll Animation This component arranges items in a responsive masonry layout. As the user scrolls, each item animates into view with a subtle slide-and-rotate effect, creating an engaging visual experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Masonry Grid with Scroll Animation to your project and fits it to your theme.

Code

How Masonry Grid with Scroll Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MasonryGrid, type MasonryCardData } from '@/components/ui/masonry-grid-with-scroll-animation';

// Sample data for the demo
const demoItems: MasonryCardData[] = [
  {
    id: '1',
    src: 'https://cdn.21st.dev/assets/mirror/d2/d2dfc061867e96bc04bb3b81b3a8d77e486c334a63605a704d2977502fd6b8bd.svg',
    alt: 'Hand-drawn vector of a robot',
    content: 'Sort of short and tiny amount of content here.',
    linkHref: '#',
    linkText: 'Cool art',
  },
  {
    id: '2',
    src: 'https://cdn.21st.dev/assets/mirror/02/027c524136ac31d2bcfcf319d4361ac08b3b9e285f1502b2e6a8da4a53b53889.svg',
    alt: 'Hand-drawn vector of entertainment items',
    content:
      'The words in this example are tolerable, passable and fair, but do draw out a bit.',
    linkHref: '#',
    linkText: 'By Pablo Stanley',
  },
  {
    id: '3',
    src: 'https://cdn.21st.dev/assets/mirror/e4/e4c5717386d321ef1faa10af2cbac3aaf25f864276bd405872d114b8a341ebc5.svg',
    alt: 'Hand-drawn vector of mechanical love',
    content: "I'm brief comparatively.",
    linkHref: '#',
    linkText: 'Find more',
  },
  {
    id: '4',
    src: 'https://cdn.21st.dev/assets/mirror/29/294bb352235efaa37d3e4d86b872b55537cb4fb61b5cff4917820f7a1a2e51f5.svg',
    alt: 'Hand-drawn vector of a person waiting',
    content: 'Sometimes the message is just right.',
    linkHref: '#',
    linkText: 'Share good art',
  },
  // Duplicate items to create a larger grid for scrolling
  ...Array.from({ length: 170 }, (_, i) => ({
    ...[
      {
        id: `5-${i}`,
        src: 'https://cdn.21st.dev/assets/mirror/29/294bb352235efaa37d3e4d86b872b55537cb4fb61b5cff4917820f7a1a2e51f5.svg',
        alt: 'Hand-drawn vector of a person waiting',
        content: 'Sometimes the message is just right.',
        linkHref: '#',
        linkText: 'Share good art',
      },
      {
        id: `6-${i}`,
        src: 'https://cdn.21st.dev/assets/mirror/02/027c524136ac31d2bcfcf319d4361ac08b3b9e285f1502b2e6a8da4a53b53889.svg',
        alt: 'Hand-drawn vector of entertainment items',
        content:
          'The words in this example are tolerable, passable and fair, but do draw out a bit.',
        linkHref: '#',
        linkText: 'By Pablo Stanley',
      },
      {
        id: `7-${i}`,
        src: 'https://cdn.21st.dev/assets/mirror/e4/e4c5717386d321ef1faa10af2cbac3aaf25f864276bd405872d114b8a341ebc5.svg',
        alt: 'Hand-drawn vector of mechanical love',
        content: "I'm brief comparatively.",
        linkHref: '#',
        linkText: 'Find more',
      },
      {
        id: `8-${i}`,
        src: 'https://cdn.21st.dev/assets/mirror/d2/d2dfc061867e96bc04bb3b81b3a8d77e486c334a63605a704d2977502fd6b8bd.svg',
        alt: 'Hand-drawn vector of a robot',
        content: 'Sort of short and tiny amount of content here.',
        linkHref: '#',
        linkText: 'Cool art',
      },
    ][i % 4],
    id: `${i + 5}`, // Ensure unique IDs
  })),
];

/**
 * A demo component to showcase the MasonryGrid.
 * @returns {JSX.Element} The rendered demo.
 */
export default function MasonryGridDemo() {
  return (
    <div className="bg-background min-h-[200vh] py-24">
      <div className="text-center mb-16">
        <h1 className="text-4xl font-bold tracking-tight">Animated Masonry Grid</h1>
        <p className="text-muted-foreground mt-2">Scroll down to see the items animate into view.</p>
      </div>
      <MasonryGrid items={demoItems} />
    </div>
  );
}