Hotel17: Arch and Setting Sun Hero

A hero on a plain ground where a tall doorway arch opens upward from a horizon line that draws itself across the section, revealing a room photograph, while a sun disc in the primary color rises behind the arch and then sinks as you scroll, with the serif headline split either side of 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/hotel17?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hotel17.tsx plus the button22 sliding-marker pill for the booking button and the text1 word stagger for both halves of the headline.

Quick start

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

import { Hotel17, hotel17Demo } from "@/components/beste/block/hotel17";

export default function Page() {
  return <Hotel17 {...hotel17Demo} />;
}

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

import { Hotel17 } from "@/components/beste/block/hotel17";

export default function Page() {
  return (
    <Hotel17
      eyebrow="Ostria, a house on Paros"
      heading={{ start: "Sleep where", end: "the sun sets." }}
      description="Twelve rooms of lime plaster and linen above a quiet cove."
      button={{ label: "Book a stay", href: "/book", tone: "dark" }}
      link={{ label: "See the rooms", href: "/rooms" }}
      image={{
        src: "https://oud.pics/b/hotel/ostria-sea-suite.webp",
        alt: "A linen bed facing a tall arched window onto the sea",
        focus: "68% 50%",
      }}
    />
  );
}

Props

type Heading = {
  start: string;
  end: string;
};

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

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

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

Behavior notes

• Everything plays on mount, not on scroll into view: the horizon line scales out from the center, the arch is revealed with a bottom-up clipPath over 1.8s, and the photograph settles from 130% and a 24px blur once the file has loaded.
• heading.start renders as the <h1> and heading.end as a paragraph; the second half starts its word stagger after the first half's words have played (0.08s per word), and the intro and actions follow after that.
• Scrolling the section out moves the sun down by 260% of its size behind the arch, the photo up by 14% and both text columns down by 40%.
• image.focus is passed to object-position (default 50% 50%), so you can keep the subject in view inside the narrow arch.
• On large screens the layout is three columns (text, arch, text) with the first half right-aligned to the arch; below that it stacks: eyebrow and first half, arch, then the second half.
• Reduced motion holds the sun, photo and text still and skips the reveal; the button tone falls back to dark.