House Elevation Drawing

Hotel48: House Elevation Drawing

A line drawing of the front of the house (rooms, roof suite, roof terrace, domed hammam, vine pergola and an olive tree) draws itself in, numbered markers settle on each part, and hovering a marker or its ruled note lights that part in the accent color.

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

Base UI flavor

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

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

Quick start

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

import { Hotel48, hotel48Demo } from "@/components/beste/block/hotel48";

export default function Page() {
  return <Hotel48 {...hotel48Demo} />;
}

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

import { Hotel48 } from "@/components/beste/block/hotel48";

export default function Page() {
  return (
    <Hotel48
      eyebrow="The house"
      heading="One old house, read from the outside"
      description="Built by a sea captain in 1870, rebuilt by hand over three winters."
      parts={[
        { part: "rooms", title: "Seven sea rooms", note: "Arched windows, linen, stone floors that stay cool all day." },
        { part: "suite", title: "The Roof Suite", note: "A room of its own on top, with a fireplace for October nights." },
        { part: "hammam", title: "The hammam", note: "Under the old dome, warm marble and steam from ten until eight." },
      ]}
      labels={{ drawing: "Line drawing of the front of the house" }}
    />
  );
}

Props

type PartName = "roof" | "suite" | "rooms" | "hammam" | "terrace";

type Part = {
  part: PartName;
  title: string;
  note: string;
};

type Labels = {
  drawing?: string;
};

Behavior notes

• The drawing itself is fixed in the code: all five parts plus the ground line, olive tree and sun always draw, whatever parts contains. parts only decides which markers and notes appear, their order and their numbers.
• Strokes draw with pathLength in a set order (rooms, suite, roof, hammam, terrace), then the scenery and the sun circle; markers scale in after about two seconds.
• Each marker is placed at a fixed coordinate for its part and keeps its position as the drawing scales, so marker numbers follow the order of the parts array.
• Hovering or focusing a marker, or hovering its note, turns that part's strokes, the marker, the note's number and its rule to the primary color; leaving clears it. Clicking a marker also selects it.
• Notes sit in one column on phones, two from the small breakpoint and five from the large breakpoint.
• With reduced motion the drawing, markers and notes render in their final state.