Memory Line and Photo Wave

Hotel31: Memory Line and Photo Wave

A centered light headline whose second half fades in as italic serif, above a row of five photographs cut to different heights so the row reads as a wave, rising from the middle outward over a muted band that grows up behind them while the whole row drifts sideways with the scroll.

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/hotel31?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hotel31.tsx. It has no other registry components or shadcn/ui primitives; motion comes from framer-motion.

Quick start

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

import { Hotel31, hotel31Demo } from "@/components/beste/block/hotel31";

export default function Page() {
  return <Hotel31 {...hotel31Demo} />;
}

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

import { Hotel31 } from "@/components/beste/block/hotel31";

export default function Page() {
  return (
    <Hotel31
      heading={{
        plain: "A week of salt, slow light and long lunches,",
        accent: "and a few evenings on Paros you will keep talking about.",
      }}
      images={[
        { src: "https://oud.pics/b/hotel/ostria-terrace-chairs.webp", alt: "Two woven armchairs on a terrace facing the sea" },
        { src: "https://oud.pics/b/hotel/ostria-garden-room.webp", alt: "A bedroom opening onto a garden terrace" },
        { src: "https://oud.pics/b/hotel/ostria-grilled-fish.webp", alt: "A whole grilled sea bream with charred lemon" },
        { src: "https://oud.pics/b/hotel/ostria-rooftop-suite.webp", alt: "A rooftop plunge pool facing the sunset" },
        { src: "https://oud.pics/b/hotel/ostria-stone-room.webp", alt: "A plaster bed under a whitewashed stone vault" },
      ]}
    />
  );
}

Props

type Heading = {
  plain: string;
  accent: string;
};

type Image = {
  src: string;
  alt: string;
};

Behavior notes

• The headline blurs and rises into place once when it enters the viewport, and the italic accent follows on its own fade 0.6 seconds later.
• Frame heights are fixed by position (62%, 82%, full, 82%, 62%), so the middle photo always drops lowest; the order of images decides which photo gets which height.
• Photos rise in with a delay that grows with their distance from the middle frame, so the row opens from the center outward, while the muted band behind them scales up from the bottom.
• The row translates from 2.5% to -2.5% horizontally across its scroll range, and each photo zooms slightly on hover.
• Below the sm breakpoint the first and fifth frames are hidden, leaving three photos on a phone.
• Each photo stays blurred and transparent until its file has loaded. With reduced motion all entrances, the drift and the load blur are skipped.
• Without heading the headline is not rendered, and with an empty images array the whole photo row and band are left out.