Hotel20: Name Over the Window Hero

An editorial hero built around the hotel's name: the wordmark rises in huge serif type across the page, a deep-set window photograph opens from its center underneath, the letters invert wherever they cross the photograph, and as you scroll the name slides sideways across the window while the photo drifts inside it.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel20.tsx plus the button22 sliding-marker pill for the booking button.

Quick start

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

import { Hotel20, hotel20Demo } from "@/components/beste/block/hotel20";

export default function Page() {
  return <Hotel20 {...hotel20Demo} />;
}

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

import { Hotel20 } from "@/components/beste/block/hotel20";

export default function Page() {
  return (
    <Hotel20
      eyebrow="Twelve rooms above a quiet cove on Paros"
      wordmark="Ostria"
      description="A stone house with small windows, each cut to frame a single piece of the Aegean."
      button={{ label: "Book a stay", href: "/book", tone: "dark" }}
      link={{ label: "See the rooms", href: "/rooms" }}
      image={{
        src: "https://oud.pics/b/hotel/ostria-window-view.webp",
        alt: "A deep-set window in a whitewashed wall framing the sea",
      }}
      caption="Room seven, the window over the islet"
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

type TextLink = {
  label: string;
  href: string;
};

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

Behavior notes

• The wordmark is white text with mix-blend-difference, so it reads as dark ink on a light page, light on a dark one, and as an inverted negative where it overlaps the photograph.
• On mount the name rises out of a clipped line (0.3s delay), then the window opens from its center with a clipPath once the image has loaded, as the photo eases from 135% to 114%. Caption, description and actions fade in after, around 1.5s.
• While the stage crosses the viewport the name moves from 4% to -6% horizontally and the photo from -6% to 6% vertically inside its frame; the window itself does not move.
• The name size is clamp(5rem, 24vw, 22rem) on one line, and the window is 46% of the stage width on phones, 34% from sm and 24% from large screens.
• From the medium breakpoint the bottom row is a twelve-column grid: caption left, description centered, actions right. Below it they stack.
• Reduced motion skips the reveal and the scroll drift; the button tone falls back to dark.