Included Amenities Glyph Grid

Hotel42: Included Amenities Glyph Grid

A ruled grid of what every stay includes, where each amenity's hand-drawn line glyph traces itself in stroke by stroke above a serif title and a one-line note.

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

Base UI flavor

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

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

Quick start

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

import { Hotel42, hotel42Demo } from "@/components/beste/block/hotel42";

export default function Page() {
  return <Hotel42 {...hotel42Demo} />;
}

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

import { Hotel42 } from "@/components/beste/block/hotel42";

export default function Page() {
  return (
    <Hotel42
      eyebrow="Included in every stay"
      heading="Small things we never charge for"
      description="No minibar list, no resort fee. These are simply part of staying in the house."
      amenities={[
        { glyph: "robe", title: "Linen robes", note: "Waiting on the hook, washed in sea air" },
        { glyph: "bicycle", title: "Bicycles", note: "Two by the gate, baskets for the bakery" },
        { glyph: "glass", title: "Evening glass", note: "Island wine on the terrace at seven" },
      ]}
    />
  );
}

Props

type GlyphName = "robe" | "bicycle" | "book" | "glass" | "lounger" | "cup" | "shell" | "moon";

type Amenity = {
  glyph: GlyphName;
  title: string;
  note: string;
};

Behavior notes

• Glyphs are SVG paths on a 48 unit grid animated with pathLength from 0 to 1 over 1.6 seconds, staggered by index, once per page view as they enter the viewport.
• The rule above each cell is a scaleX transform anchored left, so the lines draw in sequence a moment after each cell fades up.
• Hovering a cell lifts its glyph by a few pixels.
• The grid is two columns below the large breakpoint and three from it. Eight glyph names are available; the glyph is chosen by name, so there is no custom icon slot.
• With reduced motion the glyphs, rules and cells render in their final state with no draw or fade.