# Zoom Transition

Screen transition where a tile grows out of its exact spot into a full page before the content fades in. Closing returns it to the tile, and dragging down dismisses it.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/zoom-transition
```

## Import

```tsx
import { useZoomTransition, ZoomTransition } from "@/components/ui/zoom-transition/zoom-transition";
```

## Variants

- `card` — Card: `npx @lumioui/cli add pro/zoom-transition-card`
- `gallery` — Gallery: `npx @lumioui/cli add pro/zoom-transition-gallery`
- `widget` — Widget: `npx @lumioui/cli add pro/zoom-transition-widget`

## Props

### ZoomTransition

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `string | null` | Controlled open page id (null = closed). |
| `defaultOpen?` | `string | null` | Uncontrolled initial page id. |
| `onOpenChange?` | `(id: string | null) => void` | Fires with the page id on open and null on close. |
| `pageRadius?` | `number` | Corner radius the page settles at when flush. Default 0. |
| `dragToDismiss?` | `boolean` | Allow drag-down to dismiss. Default true. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### ZoomTransitionSource

| Prop | Type | Notes |
| --- | --- | --- |
| `id` | `string` | Matches the Page this tile opens. |
| `radius?` | `number` | Tile corner radius — the page starts from it. Default 20. |
| `accessibilityLabel?` | `string` | Screen-reader label for the tile ("Open Memories"). |
| `disabled?` | `boolean` | — |
| `onPress?` | `() => void` | Fires on tap, before the page opens. |
| `className?` | `string` | Size + surface classes; reused for the in-flight snapshot. |
| `children?` | `React.ReactNode` | — |

### ZoomTransitionPage

| Prop | Type | Notes |
| --- | --- | --- |
| `id` | `string` | Matches the Source that opens it. |
| `label?` | `string` | Screen-reader name for the page ("Memories"). |
| `className?` | `string` | Classes for the page surface (default bg-background). |
| `children?` | `React.ReactNode` | — |

### ZoomTransitionBand

| Prop | Type | Notes |
| --- | --- | --- |
| `index?` | `number` | Page band order below the hero: 0 title, 1 next block… 120ms apart. |
| `row?` | `number` | Tile order inside the band — adds 40ms per tile. |
| `className?` | `string` | — |

### ZoomTransitionClose

| Prop | Type | Notes |
| --- | --- | --- |
| `accessibilityLabel?` | `string` | Default "Close". |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

## Icons rendered

- `x` — /icons.html?i=x

Source: https://lumioui.com/components/zoom-transition