Line Logo Hosts Quote

Hotel33: Line Logo Hosts Quote

A line-drawn arched doorway draws itself in stroke by stroke, a sun rises behind its horizon and sprouts rays while three wave lines slide endlessly inside the door, above a large centered serif quote and a hosts' signature set between two small dots.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel33.tsx. It has no other registry components or shadcn/ui primitives; the logo is inline SVG animated with framer-motion.

Quick start

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

import { Hotel33, hotel33Demo } from "@/components/beste/block/hotel33";

export default function Page() {
  return <Hotel33 {...hotel33Demo} />;
}

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

import { Hotel33 } from "@/components/beste/block/hotel33";

export default function Page() {
  return (
    <Hotel33
      mark={{ label: "Ostria" }}
      quote="We kept the house on Paros small on purpose, so that by your second morning we know how you take your coffee."
      signature={{ prefix: "Your hosts", names: "Joanna Newsom and Devendra Banhart" }}
    />
  );
}

Props

type Mark = {
  label: string;
};

type Signature = {
  prefix: string;
  names: string;
};

Behavior notes

• The logo is a fixed SVG drawing: mark.label is only used as its aria-label (with role="img"), so the artwork itself does not change with the prop.
• On entering the viewport the base, the two arches and the horizon draw in through pathLength with a 0.15 second stagger, then the sun rises from below the horizon and its five rays draw in.
• The sun and rays use the primary color, and they are clipped to the sky inside the door so the sun is hidden until it clears the horizon.
• The three wave lines loop forever, alternating direction, at 5, 6.5 and 8 seconds per cycle; the path is one wavelength wider than the door so the loop has no visible seam.
• With reduced motion every stroke appears drawn, the sun sits in place and the waves stay still.
• Each of the logo, quote and signature is left out when its prop is missing.