Zoom Transition

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/zoom-transition

Usage

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

Also exported: useZoomTransition.

Examples

Card

An editorial "Today" feed.

Widget

A home screen lit from above in white.

API reference

ZoomTransition

Prop Type Default
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 Default
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 Default
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 Default
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 Default
accessibilityLabel string

Default "Close".

 —
className string —
children React.ReactNode —