# Lightbox Grid

A photo grid that opens into a viewer. The photo zooms out of its tile and returns to it.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/lightbox-grid
```

## Usage

```tsx
import { LightboxGrid } from '@/components/fetaui/lightbox-grid'

const photos = [{ src: '/lake.jpg', alt: 'Lake at dawn', caption: 'Lake shore, early morning', meta: 'Oct 12 · 06:42' }]

export function Example() {
  return <LightboxGrid title="Field trip" photos={photos} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | Field trip |
| photos | LightboxPhoto[] | six stand-ins |
| state | grid, open, dismissing |  |
| defaultState | grid, open, dismissing | grid |
| onStateChange | (state) => void |  |
| index | number |  |
| defaultIndex | number | 0 |
| onIndexChange | (index) => void |  |
| animated | boolean | true |

## When to use

- For a short set of photos where each one is worth seeing large.

## When not to use

- For a full gallery page: use a route per photo.
- For one image: use Media.

## Accessibility

- The viewer is a dialog that traps focus and starts on Close.
- Closing returns focus to the photo that opened it.
- The caption is announced as you page.
- Each tile and thumbnail is a button named by its photo.

## Motion

- The photo moves from its tile to the viewer with a 350 ms spring, as a transform only.
- The rest of the viewer fades in over 150 ms.
- Dismiss shrinks to 90% and fades to 60%, then returns to the tile, 300 ms in all.
- On touch screens, swipe down past 80 px to close.
- With reduced motion, the viewer swaps in place.