Hotel36: Portrait Film Split Hero

A split hero with a serif headline, intro, three notes under self-drawing rules and a reserve pill on one side, and on the other a tall portrait film that wipes open from the bottom and settles from a zoom, loops silently with a play and pause button, and fills a hairline beneath it as each loop plays.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel36.tsx plus the button22 sliding-marker pill used for the reserve action and the text1 word stagger used for the headline.

Quick start

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

import { Hotel36, hotel36Demo } from "@/components/beste/block/hotel36";

export default function Page() {
  return <Hotel36 {...hotel36Demo} />;
}

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

import { Hotel36 } from "@/components/beste/block/hotel36";

export default function Page() {
  return (
    <Hotel36
      eyebrow="The hammam"
      heading="An hour of steam under the oldest part of the house."
      description="Warm marble, slow light through round skylights and nobody in a hurry."
      notes={[
        { label: "Open", value: "10:00 to 20:00" },
        { label: "Rituals", value: "From 50 minutes" },
        { label: "For two", value: "On request" },
      ]}
      button={{ label: "Reserve an hour", href: "/spa", tone: "dark" }}
      link={{ label: "See the rituals", href: "/spa/rituals" }}
      video={{
        src: "https://oud.pics/b/hotel/ostria-video-hammam.mp4",
        poster: "https://oud.pics/b/hotel/ostria-hammam.webp",
        label: "Steam drifting through shafts of light in a domed stone hammam",
        caption: "The hammam at eleven in the morning",
      }}
      labels={{ play: "Play", pause: "Pause" }}
    />
  );
}

Props

type Note = {
  label: string;
  value: string;
};

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

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

type Video = {
  src: string;
  poster: string;
  label: string;
  caption: string;
};

type Labels = {
  play?: string;
  pause?: string;
};

Behavior notes

• On mount the film's <figure> opens with a clipPath wipe from the bottom while the video scales from 120% to 100%, and the headline staggers in at 0.06 seconds per word.
• The description, notes and actions are timed after the headline based on its word count, and each note's rule scales in from the left with a 0.1 second stagger.
• The film is muted, looped and inline. The round button at its bottom right plays or pauses it, swapping icon and aria-label from the video's play and pause events.
• The hairline under the film is a bar whose scaleX is written from currentTime / duration on every animation frame, so it fills once per loop.
• From lg the copy takes six of twelve columns and the film five, starting at column eight; below that the film stacks under the copy.
• With reduced motion the film is paused on its poster and the wipe, zoom and text entrances are skipped. The arrow on link only nudges on hover when motion is allowed.
• The actions row renders when either button or link is set, and notes render only when the array is not empty.