When to Come Year Chart

Hotel49: When to Come Year Chart

Two smooth lines for sea temperature and daily sunshine draw across the months under a bracket marking the open season, and hovering a month glides a marker along both lines while the large serif figures roll over and a note describes that month.

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

Base UI flavor

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

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

Quick start

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

import { Hotel49, hotel49Demo } from "@/components/beste/block/hotel49";

export default function Page() {
  return <Hotel49 {...hotel49Demo} />;
}

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

import { Hotel49 } from "@/components/beste/block/hotel49";

export default function Page() {
  return (
    <Hotel49
      eyebrow="When to come"
      heading="The year by the water"
      months={[
        { label: "Mar", sea: 16, sun: 6, open: false },
        { label: "Apr", sea: 17, sun: 8, open: true, note: "Wildflowers on every wall, and the sea is for the brave." },
        { label: "May", sea: 19, sun: 10, open: true, note: "Long lunches outside and the first real swims." },
        { label: "Jun", sea: 22, sun: 12, open: true, note: "Our favorite month: warm water and quiet coves." },
        { label: "Nov", sea: 19, sun: 5, open: false },
      ]}
      initialMonth={3}
      closedNote="The house rests and the island belongs to the fishermen."
      labels={{ sea: "Sea", sun: "Sun", seaUnit: "°C", sunUnit: "hours a day", open: "We are open", chart: "Sea temperature and daily sunshine through the year" }}
    />
  );
}

Props

type Month = {
  label: string;
  sea: number;
  sun: number;
  open: boolean;
  note?: string;
};

type Labels = {
  sea: string;
  sun: string;
  seaUnit: string;
  sunUnit: string;
  open: string;
  chart?: string;
};

Behavior notes

• Each line is a Catmull-Rom curve that passes through every month's value exactly. Sea is scaled into the upper band and sun into the lower band, each between its own minimum and maximum, so the curves never overlap and absolute values are not to scale.
• The bracket spans from the first to the last month with open: true; months in between that are closed still fall under it. It is not drawn if no month is open.
• Each month is an invisible full-height button over the chart, selected on hover, focus or click. The marker line and the two dots glide to it over 0.7 seconds, and the figures roll vertically to the new values.
• The note shows the month's note when open and closedNote when closed. The figures panel is an aria-live="polite" region and only renders when labels is passed.
• The sea figure appends seaUnit directly to the number; the sun figure prints sunUnit as a separate small label.
• With reduced motion the curves render fully drawn, the marker jumps instead of gliding and the figures swap with a fade.