Guest Book Score and Notes

Hotel43: Guest Book Score and Notes

A large serif score with four hairline rating bars that fill to their values sits beside big serif guest notes that blur from one to the next on a timer, with a row of progress hairlines and arrow controls below.

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

Base UI flavor

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

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

Quick start

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

import { Hotel43, hotel43Demo } from "@/components/beste/block/hotel43";

export default function Page() {
  return <Hotel43 {...hotel43Demo} />;
}

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

import { Hotel43 } from "@/components/beste/block/hotel43";

export default function Page() {
  return (
    <Hotel43
      eyebrow="Guest book"
      heading="What people write on their last morning"
      score={{ value: "9.7", scale: "out of 10", note: "From 412 stays since the house reopened" }}
      breakdown={[
        { label: "Rooms", value: 9.8 },
        { label: "Breakfast", value: 9.9 },
      ]}
      reviews={[
        { quote: "We came for four nights and changed our ferry twice.", name: "Rhiannon Giddens", detail: "Sea Suite, June" },
        { quote: "The quietest week I have had in years.", name: "Patrick Watson", detail: "Garden Room, September" },
      ]}
      interval={7}
      labels={{ previous: "Previous note", next: "Next note", show: "Show note" }}
    />
  );
}

Props

type Score = {
  value: string;
  scale: string;
  note: string;
};

type Rating = {
  label: string;
  value: number;
};

type Review = {
  quote: string;
  name: string;
  detail: string;
};

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

Behavior notes

• Each rating bar fills with scaleX set to value / 10, so values are read on a 10 point scale, and the number beside it is printed with one decimal place.
• Notes advance every interval seconds and wrap around. The timer does not run with fewer than two reviews or with reduced motion on.
• Hovering the notes column pauses the rotation; the active hairline then shows full instead of continuing to fill, and restarts when the pointer leaves.
• The active hairline fills linearly over the interval, past notes stay at a lighter tint, and clicking any hairline jumps to that note. The arrows step backward and forward with wraparound.
• Notes swap with a blur and short vertical shift; the quote area has a minimum height so the controls do not jump between short and long notes.
• The score column and notes column sit side by side from the large breakpoint and stack below it. The breakdown list is hidden when breakdown is empty.