Around the Cove Strip

Hotel16: Around the Cove Strip

A horizontal strip of portrait experience cards that starts in line with the heading and bleeds off the right edge, snaps card by card as you swipe or press the arrow buttons, and fills a hairline progress bar underneath as it scrolls; each card leans in on hover under a category pill.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel16.tsx plus the text1 word stagger it uses for the heading.

Quick start

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

import { Hotel16, hotel16Demo } from "@/components/beste/block/hotel16";

export default function Page() {
  return <Hotel16 {...hotel16Demo} />;
}

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

import { Hotel16 } from "@/components/beste/block/hotel16";

export default function Page() {
  return (
    <Hotel16
      eyebrow="Around the cove"
      heading="What we do on our days off."
      description="These are the places we send friends on Paros."
      experiences={[
        {
          kind: "Swim",
          title: "The rocks before breakfast",
          description: "Clear water off smooth stone, ten minutes along the coast path.",
          distance: "10 min on foot",
          href: "/around/rocks",
          image: { src: "https://oud.pics/b/hotel/ostria-swimmer.webp", alt: "A woman stepping from pale rocks into clear water" },
        },
        {
          kind: "Village",
          title: "Coffee at the harbor",
          description: "Watch the fishing boats come back in the morning.",
          distance: "6 min on foot",
          href: "/around/harbor",
          image: { src: "https://oud.pics/b/hotel/ostria-harbour.webp", alt: "Fishing boats moored at a stone quay" },
        },
      ]}
      labels={{ previous: "Previous", next: "Next" }}
    />
  );
}

Props

type Experience = {
  kind: string;
  title: string;
  description: string;
  distance: string;
  href: string;
  image: { src: string; alt: string };
};

type Labels = {
  previous?: string;
  next?: string;
};

Behavior notes

• The strip's left and right padding (and scroll padding) are measured from the header container's left edge on mount and on resize, so the first card lines up with the heading at any viewport width.
• The arrow buttons scroll by one card width plus the 24px gap, smoothly unless reduced motion is on. Each one is disabled when the strip is within 8px of that end.
• Cards are snap-start with mandatory snapping; they are 78vw wide on phones, 22rem from sm and 24rem from large screens. The scrollbar is hidden.
• The hairline under the strip draws in once, then its dark fill follows the strip's horizontal scroll progress.
• Hovering a card scales its photograph to 105% and nudges the arrow; photographs fade in from a 24px blur after they load.
• The strip slides in 60px from the right on first view; reduced motion turns that and the other entrances off.