Concierge Requests Hover List

Hotel28: Concierge Requests Hover List

A ruled list of concierge requests in large serif lines, each with a note and how much notice it needs: hovering a row dims the others while a tilted photograph trails the pointer across the list and swaps to match the request.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel28.tsx plus the button22 sliding-marker pill for the closing button and the text1 word stagger for the heading.

Quick start

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

import { Hotel28, hotel28Demo } from "@/components/beste/block/hotel28";

export default function Page() {
  return <Hotel28 {...hotel28Demo} />;
}

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

import { Hotel28 } from "@/components/beste/block/hotel28";

export default function Page() {
  return (
    <Hotel28
      eyebrow="Just ask"
      heading="Things we are happy to arrange."
      description="Most of these can happen by tomorrow, a few by this afternoon."
      requests={[
        {
          title: "A day on the caique",
          note: "Three coves, a local skipper, lunch on board",
          lead: "A day ahead",
          href: "/concierge/boat",
          image: { src: "https://oud.pics/b/hotel/ostria-boat-cove.webp", alt: "A wooden boat in a turquoise cove" },
        },
        {
          title: "A massage on your terrace",
          note: "Island oils and the sound of the sea",
          lead: "Same day",
          href: "/concierge/massage",
          image: { src: "https://oud.pics/b/hotel/ostria-treatment-room.webp", alt: "A linen massage table beside a bright window" },
        },
      ]}
      button={{ label: "Write to the concierge", href: "mailto:[email protected]", tone: "dark" }}
    />
  );
}

Props

type ConciergeRequest = {
  title: string;
  note: string;
  lead: string;
  href: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• From the medium breakpoint a 4:5 photo frame follows the pointer through a spring, centered roughly on the cursor; it scales and tilts in when a row is hovered, crossfades its image when the row changes, and tilts out when the pointer leaves the list.
• Hovering or focusing a row dims every other row's title and note; the hovered title also nudges right.
• Below the medium breakpoint the floating photo is hidden and each row shows a small square thumbnail on the left instead. The lead text is hidden below the small breakpoint, leaving only the arrow.
• The floating photo and the row thumbnails are decorative (empty alt, aria-hidden), so image.alt is not read out in this block.
• Rows fade up 0.08s apart and their top rules, plus a closing bottom rule, draw in from the left once the list is in view.
• With reduced motion the entrance fades and rule draws are skipped.