Demos

Travel

Airbnb

Zoom blur into listing + sheet checkout with axis-x steps

zoomherosheetaxisfadedrill
Sourceapps/docs/src/demo/air-bnb↗

Explore → Wishlists (fade)

fade idle

Fade — bottom-nav tabs cross-fade in tab order

Explore → Listing (zoom)

zoom idle

Zoom blur — the tapped card expands into the listing

Trips → Listing (zoom)

zoom idle

Zoom blur — the upcoming reservation opens its listing

Explore → Popular homes (drill)

drill idle

Drill — a “see all” row pushes its full list

Wishlists → Recently viewed (drill)

drill idle

Drill — a wishlist opens its saved homes as a pushed list

Popular homes → Listing (zoom)

zoom idle

Zoom blur — list cards zoom open instead of drilling

Listing → Photo tour (hero)

hero idle

Hero fade — the cover grows into the tour; Back returns it to the cover

Explore → Search (sheet)

sheet idle

Sheet blur — search rises over a blurred Explore feed

Search → Homes in Busan (sheet)

sheet idle

Sheet blur — picking a destination drops search onto results

Listing → Checkout (sheet)

sheet idle

Sheet static — checkout slides up over the listing

Checkout → Payment (axis)

axis idle

Axis x — review ↔ payment inside the persistent sheet

Confirm → Trips (sheet)

sheet idle

Sheet static — booking drops the sheet onto Trips