Hours of the House Dial

Hotel50: Hours of the House Dial

A 24 hour dial where hour ticks fade in around the face and each service gets its own ring whose arc draws from opening to closing time, beside a ruled list that lights the chosen service's arc and shows its name and hours in the middle of the dial.

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

Base UI flavor

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

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

Quick start

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

import { Hotel50, hotel50Demo } from "@/components/beste/block/hotel50";

export default function Page() {
  return <Hotel50 {...hotel50Demo} />;
}

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

import { Hotel50 } from "@/components/beste/block/hotel50";

export default function Page() {
  return (
    <Hotel50
      eyebrow="Hours of the house"
      heading="How a day at Ostria runs"
      description="The kitchen and the hammam do have their hours."
      services={[
        { name: "Front desk", hours: "07:00 to midnight", from: 7, to: 24 },
        { name: "Breakfast", hours: "07:30 to 11:00", from: 7.5, to: 11 },
        { name: "Roof bar", hours: "18:00 to 01:00", from: 18, to: 1 },
      ]}
      hourLabels={["Midnight", "6", "Noon", "18"]}
      labels={{ dial: "A 24 hour dial of the opening hours" }}
    />
  );
}

Props

type Service = {
  name: string;
  hours: string;
  from: number;
  to: number;
};

type Labels = {
  dial?: string;
};

Behavior notes

• from and to are decimal hours on a 24 hour clock (7.5 is 07:30), with midnight at the top. When to is less than or equal to from, the arc runs past midnight, so from: 18, to: 1 draws a seven hour arc.
• hours is display text only; the arc geometry comes from from and to.
• Each service gets its own ring, stepping inward by 14 units per row from the outermost lane, so long lists push the inner rings toward the center label.
• hourLabels uses the first four entries, placed at 0, 6, 12 and 18 o'clock.
• A row is selected on click, hover or focus: its arc thickens and turns to the primary color, its hours turn primary in the list, and the center label swaps with a short blur. The center label is an aria-live="polite" region.
• Arcs draw in with pathLength and ticks fade in around the face once in view; with reduced motion they render in place.