# Image Density Grid — Skecher UI

A percentage-controlled image grid that reflows every frame into a denser or sparser layout with layout motion, soft blur, and a temporary glow during density changes.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/image-density-grid
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { ImageDensityGrid } from "@/components/ui/image-density-grid";

const images = [
  { id: "one", src: "/images/gallery/one.jpg", alt: "Abstract blue artwork" },
  { id: "two", src: "/images/gallery/two.jpg", alt: "Red architectural detail" },
  { id: "three", src: "/images/gallery/three.jpg", alt: "Green landscape" },
  { id: "four", src: "/images/gallery/four.jpg", alt: "Monochrome portrait" },
];

export default function ImageDensityGridExample() {
  return (
    <ImageDensityGrid
      images={images}
      options={[20, 40, 80, 120]}
      initialPercent={40}
      title="Browse the collection"
      gridMaxHeight="42rem"
      showControls
      padded
      className="mx-auto max-w-6xl"
    />
  );
}
```

## Source files

- components/ui-components/image-density-grid.tsx — Image Density Grid component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/image-density-grid
- Registry item with complete source: https://skecher-ui.com/r/image-density-grid.json
- Component AI context: https://skecher-ui.com/llms/image-density-grid