Animated Image Grid

A stunning, fluid CSS grid layout that beautifully reflows items when they are dynamically added or removed. It leverages cutting-edge CSS container queries (container-type), math functions (round(), mod()), and @starting-style to orchestrate complex entrance animations purely through CSS!

Showcase

Note: This component uses modern CSS functions (round(), mod(), @starting-style). Ensure your target audience is using reasonably modern browsers (Chrome 111+, Safari 16.4+, Firefox 113+).

Installation

npx shadcn-extras@latest add animated-image-grid

Usage


npx shadcn-extras@latest add animated-image-grid


import { AnimatedImageGrid } from '@/components/core/animated-image-grid';
const MOCK_ITEMS = [
  { id: 1, src: 'https://i.pravatar.cc/150?img=1' },
  { id: 2, src: 'https://i.pravatar.cc/150?img=2' },
];
export function Example() {
  return <AnimatedImageGrid items={MOCK_ITEMS} gap='10px' size='130px' />;
}

Props

Prop	Type	Description
`items`	`AnimatedImageGridItem[]`	An array of objects containing `id` and `src` properties.
`gap`	`string`	The gap between grid items (default: `10px`).
`size`	`string`	The size of the square grid items (default: `130px`).
`variant`	`string`	The visual style variant (`'default'`, `'circle'`, `'polaroid'`, `'minimal'`).
`itemClassName`	`string`	Custom Tailwind classes for the item wrapper div.
`imageClassName`	`string`	Custom Tailwind classes for the image element itself.