Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/masonry-grid-with-scroll-animationimport { MasonryGrid, type MasonryCardData } from '@/components/ui/masonry-grid-with-scroll-animation';
// Sample data for the demo
const demoItems: MasonryCardData[] = [
{
id: '1',
src: 'https://assets.codepen.io/2585/Roboto.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://assets.codepen.io/2585/Entertainment.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://assets.codepen.io/2585/Mechanical+Love.svg',
alt: 'Hand-drawn vector of mechanical love',
content: "I'm brief comparatively.",
linkHref: '#',
linkText: 'Find more',
},
{
id: '4',
src: 'https://assets.codepen.io/2585/Waiting.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://assets.codepen.io/2585/Waiting.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://assets.codepen.io/2585/Entertainment.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://assets.codepen.io/2585/Mechanical+Love.svg',
alt: 'Hand-drawn vector of mechanical love',
content: "I'm brief comparatively.",
linkHref: '#',
linkText: 'Find more',
},
{
id: `8-${i}`,
src: 'https://assets.codepen.io/2585/Roboto.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>
);
}