Outdoors Gallery with Morph Lightbox

Hotel41: Outdoors Gallery with Morph Lightbox

Six portrait tiles with place labels rise into an even grid, and tapping one grows that same photograph out of its tile into a full-screen view with arrows and a caption, then shrinks it back into place on close.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/hotel41?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/hotel41?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hotel41.tsx plus the text1 word stagger it uses for the heading.

Quick start

The installed file exports hotel41Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Hotel41, hotel41Demo } from "@/components/beste/block/hotel41";

export default function Page() {
  return <Hotel41 {...hotel41Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hotel41 } from "@/components/beste/block/hotel41";

export default function Page() {
  return (
    <Hotel41
      eyebrow="Outside"
      heading="Most of the day happens out of doors."
      description="The courtyard, the terraces and the pool, in the order guests usually find them."
      photos={[
        {
          src: "https://oud.pics/b/hotel/ostria-courtyard.webp",
          alt: "A stone courtyard with an ancient olive tree and a round bench",
          place: "Courtyard",
          caption: "The olive in the courtyard is older than the house around it.",
        },
        {
          src: "https://oud.pics/b/hotel/ostria-pool-dusk.webp",
          alt: "An infinity pool meeting the sea at dusk with two loungers",
          place: "Sea pool",
          caption: "The pool stays open until the last lantern is blown out.",
        },
      ]}
      labels={{ open: "Open photo", close: "Close", previous: "Previous photo", next: "Next photo" }}
    />
  );
}

Props

type Photo = {
  src: string;
  alt: string;
  place: string;
  caption: string;
};

type Labels = {
  open?: string;
  close?: string;
  previous?: string;
  next?: string;
};

Behavior notes

• Each tile image and the lightbox image share a layoutId, so opening a photo morphs the tile itself into the full-screen view over 0.7 seconds, and closing sends it back. With reduced motion the morph duration drops to zero.
• In the lightbox, Escape closes, the left and right arrow keys step through the set, and clicking the dark area around the photo also closes it. Stepping wraps from the last photo to the first.
• Page scroll is locked while the lightbox is open and the previous overflow value is restored on close.
• The place and caption under the enlarged photo crossfade with a small vertical shift each time you step.
• The grid is two columns on phones and three from the medium breakpoint; tiles fade up in a stagger once, and the photo scales slightly on hover.
• Each tile button's accessible name is labels.open followed by the photo's place.