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.
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>
);
}