Hotel19: Opening Shutters Hero

A hero with a large serif headline and a short intro over one wide photograph cut into tall slats like wooden shutters: once the image loads, the slats open from the center outward, and as the page scrolls each one drifts down at its own speed so the picture breathes like light through louvers.

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

Base UI flavor

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

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

Quick start

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

import { Hotel19, hotel19Demo } from "@/components/beste/block/hotel19";

export default function Page() {
  return <Hotel19 {...hotel19Demo} />;
}

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

import { Hotel19 } from "@/components/beste/block/hotel19";

export default function Page() {
  return (
    <Hotel19
      eyebrow="Ostria, Paros"
      heading="Open the shutters. The rest is the sea."
      description="A stone house of twelve rooms on a quiet cove."
      button={{ label: "Book a stay", href: "/book", tone: "dark" }}
      link={{ label: "Walk through the house", href: "/house" }}
      image={{
        src: "https://oud.pics/b/hotel/ostria-exterior-golden.webp",
        alt: "A whitewashed stone hotel stepping down a hillside to a cove at sunset",
      }}
      slats={5}
    />
  );
}

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

• Every slat holds the same image, stretched to the full band width and offset by its index, so together they read as one picture with gaps between.
• The slats stay closed until the image has loaded, then each opens top to bottom with a clipPath over 1.5s, delayed 0.12s per step away from the center, while the photo settles from 118% to 100%.
• On scroll every slat moves down by 8% plus up to 10% more the farther it is from the center, so the outer slats lead and the band appears to flex.
• Only the first slat's image carries alt; the copies are aria-hidden with empty alt so screen readers announce the photograph once.
• The band is 4:5 on phones, 16:10 from sm and 16:8 from large screens. The headline takes eight columns on large screens with the intro and actions in the remaining four.
• The text plays on mount rather than on scroll into view. Reduced motion skips the reveal, zoom and drift; the button tone falls back to dark.